Angular2 - ngIf in ngFor

Question

我想檢查實際元素是否有值。

例如，我想檢查巧克力是黑色還是白色。根據這個，我想顯示正確的文本。

<ng-container *ngFor="let chocolate of product.getChocolates();"> 
    <md-card *ngIf="chocolate.getName() == black">IT IS BLACK</md-card> 
    <md-card *ngIf="chocolate.getName() == white">IT IS WHITE</md-card> 
</ng-container> 

如何修復代碼，使其工作？

Answer 1

的問題是你錯過了'（單引號）後面string這是black & white

<ng-container *ngFor="let chocolate of product.getChocolates();"> 
    <md-card *ngIf="chocolate.getName() == 'black'">IT IS BLACK</md-card> 
    <md-card *ngIf="chocolate.getName() == 'white'">IT IS WHITE</md-card> 
</ng-container> 

Answer 2

<ng-container *ngFor="let chocolate of product.getChocolates();"> 
    <md-card *ngIf="chocolate.getName() == black">IT IS BLACK</md-card> 
    <md-card *ngIf="chocolate.getName() == white">IT IS WHITE</md-card> 
</ng-container> 

修改chocolate .getName()到chocolate.getName()

Answer 3

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<div *ngFor="let chocolate of chocolates"> 
    <div *ngIf="chocolate.name == 'black'">IT IS BLACK</div> 
    <div *ngIf="chocolate.name == 'white'">IT IS WHITE</div> 
</div>` 
}) 
export class AppComponent{ 
    chocolates:any=[{ 
    name:'black' 
    }, 
    { 
    name:'white' 
    }]; 

    constructor() { } 
}