2017-07-07 13 views
0

これが可能かどうかわかりませんが、製品の動的HTMLテーブルを作成しています。私は各製品の "updatedDate"を評価して、その日付が現在の日付から7日を引いたものかどうかを判断しています - todayMinusSeven日は、現在の日付マイナス7日でマイグレーションするTypeScriptコンポーネントファイルで宣言しています。ngIg別のDOM要素を角2で表示する

this.todayMinusSeven = new Date(); 
this.todayMinusSeven.setDate(this.todayMinusSeven.getDate() - 7); 

HTMLテーブルの* ngIf条件からid "notice"のdiv要素を表示する方法を理解しようとしています。基本的に、製品のupdatedDateが現在の日付から7日を引いた日付よりも小さい場合は、「通知」divを表示します。ここに私のHTMLは次のとおりです。

<div id="notice" class="err-notice"> 
    <img src="../error.svg" /> 
    There are products that have not been updated in the past seven days...please notify the support department for further information 
</div> 
<table> 
    <thead> 
     <th></th> 
     <th>ID</th> 
     <th>Name</th> 
     <th>Updated On</th> 
    </thead> 
    <tbody> 
     <tr *ngFor="let product of products?.results"> 
      <td> 
       <ng-container *ngIf="product.updatedOn < todayMinusSeven"; else nonotice;"> 
        <img src="../error.svg" /> 
       </ng-container> 
       <ng-template #nonotice> 
        <img *ngIf="selected" src="../product-open.svg" /> 
        <img *ngIf="!selected" src="../product.svg" /> 
       </ng-template> 
      </td> 
      <td>{{product.id}}</td> 
      <td>{{product.name}}</td> 
      <td>{{product.updatedOn}}</td> 
     </tr> 
    </tbody> 
</table> 

または私はHTTPサービスクラスから製品のリストを取得し、配列に加入しています、私はわからないHTMLまたはコンポーネントtypescriptファイルでこれを行う必要があるかどうかこれはHTMLマークアップですでにトラバースされているため、この条件の配列をトラバースする必要はありません。これはAngular 2/4のHTMLで可能ですか?

ありがとうございます!

+1

あなたの要件に応じて投稿したコードは動作しますか?そうでない場合は、エラーを生成しますか? – DeborahK

+0

コードは私が追加したときに動作し、divは常に表示されます。私の目標は、テーブルの1つ以上の製品が私の条件を満たす場合にのみ、divや他の場所に条件を追加して表示することです - updatedDate

+0

商品オブジェクトにフィールドを追加します通知を設定するためにフラグを立てることができます。 HTMLまたはTypscriptコントローラの呼び出しで動的に処理を行った場合、ダイジェストループが呼び出されるたびに(基本的に、ユーザーがページとやりとりしたり、マウスをクリックしたりするたびに)計算が行われます。たくさんのオブジェクトがある場合、これには多大な処理が必要です。最初にアイテムを取得するときにアイテムを繰り返し処理してプロパティを割り当てると、処理が大幅に節約されます。 – HaveSpacesuit

答えて

0

isOutDated()のような名前のユーティリティメソッドを、そのページをサポートするTypscriptコードに追加します。このユーティリティメソッドは、製品を回転してブール値を返します。 ID付きのdivに* NgIf = "isOutDated()"を追加してください

関連する問題