在angular4中使用ngFor时如何根据值选择HTML？

Question

我是 angular 的新手，假设我有一个像这样的值数组

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

我想要不同的 html 用于真值，不同的 html 用于假值，同时使用 ngFor，我遵循了这个并实现了这个但是它不起作用

即

     <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

这是您要找的吗？

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

Answer 2

我猜你定义了两个同名的不同块，你的代码中没有#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 3

如果你只想为两个特定的案例场景使用不同的代码，那么你必须使用。 *ngIf/else 不是 *ngIf/then/else。

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

如果你的代码没有改变，唯一改变的是样式，那么最好使用一个通用组件，通过 ng class 指令。
- Angular doc. explanation of NgClass

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

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 模板。这对我有用。希望对你有帮助。

在angular4中使用ngFor时如何根据值选择HTML？

How to choose HTML according to the value while using ngFor in angular4?

angular-ng-if

ngfor

angular