角度2のJSONファイルにステータス0を含むリストを表示したい

Question

私は角度2で新しいです。私は状態0を含む予約リストを表示したいと思います。私はこのリストのコンポーネント、サービス、およびHTMLファイルを作成していますが、リストを取得していますが、コンポーネントHTMLファイルは最適化したいです。

もここに私のコンポーネントのHTMLファイルがある

<table class="table table-striped"> 
    <thead> 
     <tr> 
     <th>User ID</th> 
     <th>Email</th> 
     <th>Name</th> 
     <th>Date</th> 
     <th>Time</th> 
     <th>Zip Code</th> 
     <th>Amount</th> 
     <th>Payment Method</th> 
     <th>Status</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let booking of upcomingBookings"> 
     <td *ngIf="booking.status==0">{{booking.user_id}}</td> 
     <td *ngIf="booking.status==0">{{booking.email}}</td> 
     <td *ngIf="booking.status==0">{{booking.name}}</td> 
     <td *ngIf="booking.status==0">{{booking.date}}</td> 
     <td *ngIf="booking.status==0">{{booking.time}}</td> 
     <td *ngIf="booking.status==0">{{booking.zipcode}}</td> 
     <td *ngIf="booking.status==0">{{booking.amount}}</td> 
     <td *ngIf="booking.status==0">{{booking.payment_method | uppercase}}</td> 
     <td *ngIf="booking.status==0">{{booking.status}}</td> 
     </tr> 
    </tbody> 
    </table> 

Answer 1

あなたはng-containerを使用することができ、それはあなたがngIfを行うことができますが、それはブロックng-containerをレンダリングしません。

例：

コード：

<tr> 
    <td>1</td> 
    <td>whatever</td> 
    <td>whatever</td> 
    <td>whatever</td> 
    ... 
</tr> 
<tr> 
    <td>2</td> 
    <td>whatever</td> 
    <td>whatever</td> 
    <td>whatever</td> 
    ... 
</tr> 

Answer 2

*ngIfを繰り返し加えるHTMLを最適化していないために：

<ng-container *ngFor="let booking of upcomingBookings"> 
    <tr *ngIf="booking.status==0"> 
    <td>{{booking.user_id}}</td> 
    <td>{{booking.email}}</td> 
    <td>{{booking.name}}</td> 
    <td>{{booking.date}}</td> 
    <td>{{booking.time}}</td> 
    <td>{{booking.zipcode}}</td> 
    <td>{{booking.amount}}</td> 
    <td>{{booking.payment_method | uppercase}}</td> 
    <td>{{booking.status}}</td> 
    </tr> 
</ng-container> 

が0に等しいstatutを持つ各予約のためのことを何かのリンクをレンダリングします、ng-containerを使用してください。 DOMには反映されません。単一の*ngIfを<tr>タグに貼り付けても、それは作成されません。あなたがこの方法を最適化することができますしかし

<ng-container *ngFor="let booking of upcomingBookings" > 
     <tr *ngIf="booking.status==0"> 
      <td>{{booking.user_id}}</td> 
      <td>{{booking.email}}</td> 
      <td>{{booking.name}}</td> 
      <td>{{booking.date}}</td> 
      <td>{{booking.time}}</td> 
      <td>{{booking.zipcode}}</td> 
      <td>{{booking.amount}}</td> 
      <td>{{booking.payment_method | uppercase}}</td> 
      <td>{{booking.status}}</td> 
    </tr> 
</ng-container> 

Answer 3

：

コードは次のようにする必要があります。条件を満たすことができない場合、要素がDOM内に存在することは決してありません。いただきましたご質問を -

<tbody> 
<ng-container *ngIf="booking.status==0"> 
    <tr *ngFor="let booking of upcomingBookings"> 
    <td>{{booking.user_id}}</td> 
    <td>{{booking.email}}</td> 
    <td>{{booking.name}}</td> 
    <td>{{booking.date}}</td> 
    <td>{{booking.time}}</td> 
    <td>{{booking.zipcode}}</td> 
    <td>{{booking.amount}}</td> 
    <td>{{booking.payment_method | uppercase}}</td> 
    <td>{{booking.status}}</td> 
    </tr> 
</ng-container> 
</tbody> 

Answer 4

この

<tbody *ngFor="let booking of upcomingBookings" > 
<tr *ngIf="booking.status==0"> 
    <td>{{booking.user_id}}</td> 
    <td>{{booking.email}}</td> 
    <td>{{booking.name}}</td> 
    <td>{{booking.date}}</td> 
    <td>{{booking.time}}</td> 
    <td>{{booking.zipcode}}</td> 
    <td>{{booking.amount}}</td> 
    <td>{{booking.payment_method | uppercase}}</td> 
    <td>{{booking.status}}</td> 
</tr> 
</tbody>