Question

我在单个元素中使用了ngFor和ngIf，但后来尝试使用ngContainer。

我试图在按钮点击上隐藏一行（如果状态发生变化）

<tbody>

   <ng-container *ngFor="let d of pendingData">
      <tr *ngIf="d.status !== 'Issued'">
          <td>{{ d.orderno }} </td>
          <td>{{ d.item }} </td>
          <td> {{ d.emp }} </td>
          <td>{{ d.employee_name }}</td>
          <td>{{ d.item_name }}</td>
          <td>{{ d.item_qty }}</td>
          <td>{{ d.item_price }}</td>
          <td>{{ d.status }}</td>
          <td><button (click)="onClick()">Issue</button></td>
       </tr>
    </ng-container>

 </tbody>

这里我不能在第一行使用ngIf检查状态条件原因状态在ngFor中被删除，它将是未定义的！

如何先测试条件然后在上面的场景中循环。

Answer 1

如果我理解正确，您不希望显示已发布状态的数据。您可以做的是先将组件从组件中过滤掉，然后再转到dom，这样您就可以删除html中的ngIf。

let filteredPendingData = pendingData.filter(x => x.status != 'Issued')

<ng-container *ngFor="let d of filteredPendingData">
    <tr>
    </tr>
</ng-container>

Answer 2

＆＃13;

use  <ng-container *ngFor="#d of pendingData">

＆＃13;

   <tr *ngIf="d.status != 'Issued'">

＆＃13;

在角度2中使用ngFor和ngIf编码

2 个答案: