在角度 2 中使用 ngFor 和 ngIf 条件答案

【问题标题】：Using ngFor and ngIf codition in angular 2在角度 2 中使用 ngFor 和 ngIf 条件
【发布时间】：2017-06-30 09:02:34
【问题描述】：

我在单个元素中使用 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 中被覆盖，它将是未定义的！

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

【问题讨论】：

我不明白你的问题，你能详细说明一下吗？
当状态从待定变为已发布（点击按钮），同样简单，我需要隐藏状态改变的行
您的代码应该可以工作，您只需在（点击）函数中将 d 作为参数传递
根据 scnearios 代码似乎很好，并且在日志中它显示状态已更改：“状态正在等待更改状态已发布”，但问题是行没有被隐藏

标签： angular angular2-template

【解决方案1】：

如果我理解正确，您不想显示已发布状态的数据。您可以做的是先从您的组件中过滤它，然后再传递给您的 dom，这样您就可以删除 html 中的 ngIf。

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

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

【讨论】：

正确，只有那些状态从 Pending 变为 Issued 的数据，我需要隐藏这些数据，你能否在我的代码 sn-p 中更新显示你的代码！
你的打字稿组件在哪里？只需从 html 中删除您的 *ngIf，然后将 filteredPendingData 代码行放入您的打字稿组件。

【解决方案2】：

use  &lt;ng-container *ngFor="#d of pendingData"&gt;

   &lt;tr *ngIf="d.status != 'Issued'"&gt;

【讨论】：

我得到模板解析错误：Unexpected token # at column 1 in [#d of pendingData]
remove # & try d of pendingData