在 For 循环中有条件地呈现 LI 项

Question

我有以下使用 Angular 7:

<ul>
  <li *ngFor="let status of statuses$ | async" *ngIf="status.name != post.statusName">
    {{status.name}}
  </li>
</ul>

我收到以下错误：

Can't have multiple template bindings on one element. Use only one attribute prefixed with *

如何在循环中有条件地呈现 LI 项？

Answer 1

将 ngIf 和 ngFor 分开。一个元素上不能有 2 个结构化指令

<ul>
  <ng-template  *ngFor="let status of statuses$ | async" > 
    <li *ngIf="status.name != post.statusName">
     {{status.name}}
     </li>
  </ng-template>
</ul>

Answer 2

您只能将一个元素上的一个结构指令更改为

<ul>
<ng-container *ngFor="let status of statuses$ | async">
 <li  *ngIf="status.name != post.statusName">
    {{status.name}}
  </li>
</ng-container>

</ul>

Working stackblitz

Answer 3

试试这个，

 <ul>
 <li *ngFor="let status of statuses$ | async" >
 <div *ngIf="status.name != post.statusName">
  <p>{{status.name}}</p>
 </div>
 </li>
 </ul>

Answer 4

我们不能同时使用 ngif 和 ngfor

        <ul>
          <li *ngFor="let status of statuses$ | async" >
            <div *ngIf="status.name != post.statusName">
              <span>{{status.name}}</span>
            </div>
          </li>
        </ul>

在 For 循环中有条件地呈现 LI 项

Conditionally render a LI item in a For loop

angular

angular7