アンギュラ2でngForとngIfを使用する

Question

Imは単一の要素でngForとngIfを使用していましたが、後でngContainerを使用して試しました。

私は（ステータスが変更された場合）ここで私はステータス条件の原因の状態をチェックするために1行目にngIfを使用することはできませんボタンのクリックで行を非表示にする

<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> 

をしようとしてMは、ngForにオーバーloppedされますそれは未定義です！

最初に条件をテストし、上記のシナリオでループする方法。

Answer 1

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

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

Answer 2

私は右のそれを理解していれば、あなたはすでに発行した状態にあるデータを表示したくありません。あなたが行うことができることは、あなたのDOMに渡す前に、まずあなたのコンポーネントからフィルタをかけることで、htmlのngIfを削除することができます。

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

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