如何在angular4中使用ngFor時根據值選擇HTML？

Question

我新的角度，假設我有值的這樣

domElement:Array<boolean>=[true,false,false,false,false,true,true,true]; 

一個數組，我想真正的價值觀和不同的HTML假值不同的HTML，而使用ngFor，我跟着這個blog並實現這一點，但它不起作用

即。

 <div *ngFor="let n of domElement; let i=index"> 

<div *ngFor="let n of num; let i=index"> 

    <ng-template *ngIf="n; then gotValue else noValue"></ng-template> 

    <ng-template #noValue> 
     <div class="alert alert-warning"> 
      no value found - dummy element for no record !!! 
     </div> 
    </ng-template> 
    <ng-template #gotValue> 
     <div class="alert alert-success"> 
      got values !!! 
     </div> 
    </ng-template> 
</div> 

Answer 1

1. scenerio然後你必須使用。 * ngIf/else不是* ngIf/then/else。 Explanation here

<div *ngFor="let n of num"> <template1 *ngIf="n%2 === 0; else other_content"></template1> <template2 #other_content></template2> </div>

如果你的代碼不會改變，只是改變的就是造型比是更好地NG使用一個通用組件與風格更換類指令。

• Angular doc. explanation of NgClass
• SO Explanation

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

Answer 2

這是你在找什麼？

<div *ngFor="let n of num"> 
    <template1 *ngIf="n%2 === 0"></template1> 
    <template2 *ngIf="n%2 !== 0"></template2> 
</div> 

Answer 3

我猜你用相同的名字定義了兩個不同的塊中有你的代碼中沒有#gotValue塊嘗試了這一點：如果你想不同的代碼只有兩個特定的情況下

<div *ngFor="let n of domElement"> 
    <ng-template *ngIf="n; then noValue else gotValue"></ng-template> 
    <ng-template #noValue> 
     <div class="alert alert-warning"> 
      no value found - dummy element for no record !!! 
     </div> 
    </ng-template> 
    <ng-template #gotValue> 
     <div class="alert alert-success"> 
      got values !!! 
     </div> 
    </ng-template> 
</div> 

Answer 4

<div *ngFor="let n of num; let i=index"> 
<div *ngIf="n%2===0;else gotValue"></div> 
    <div class="alert alert-warning"> 
     no value found - dummy element for no record !!! 
    </div> 
<ng-template #gotValue> 
    <div class="alert alert-success"> 
     got values !!! 
    </div> 
</ng-template> 

你不需要NOVALUE NG-模板。這對我有效。希望能幫助到你。