在angular4中使用ngFor时如何根据值选择超文本标记语言？[复制]

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

我猜你用相同的名字定义了两个不同的块，在你的代码中没有#getValue块。

<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

1. 如果您只想为两个特定的案例场景使用不同的代码，那么您必须使用*ngIf/else不是*ngIf/then/else。这里解释一下

如果您的代码没有更改，并且唯一更改的是样式设置，那么最好使用一个通用组件，通过ng类指令替换样式。

• NgClass的角文档解释
• SO解释