Question

我是角色的新手，假设我有一系列像这样的值

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

我希望在使用ngFor时使用不同的html表示真值，使用不同的html表示错误值，我按照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

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

如果您只需要两个特定情况场景的不同代码，那么您必须使用。 * 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 class directive 替换样式的通用组件。
- Angular doc. explanation of NgClass
- SO Explanation

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

Answer 3

这是你要找的吗？

<div *ngFor="let n of num">
    <template1 *ngIf="n%2 === 0"></template1>
    <template2 *ngIf="n%2 !== 0"></template2>
</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-template。这对我有用。希望它有所帮助。

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

4 个答案: