ngIf在Angular 2中顯示另一個DOM元素

不確定這是否可行，但我正在構建一個動態的產品HTML表格。我正在評估每個產品的「updatedDate」並確定該日期是否小於當前日期減去7天 - todayMinusSeven天是一個變量，我在我的TypeScript組件文件中聲明將其初始化爲當前日期減去七天：ngIf在Angular 2中顯示另一個DOM元素

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

我想弄清楚如何從HTML表格中的* ngIf條件顯示我的id「notice」的div元素。基本上，如果任何產品的updatedDate小於當前日期減去七天，則顯示「notice」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或組件打字稿文件的產品對象，所以我寧願不必遍歷數組，因爲它已經在HTML標記中遍歷了。這是否可以在Angular 2/4中使用HTML？

謝謝！

來源

2017-07-07 J-man

您發佈的代碼是否按照您的要求工作？如果不是，它會產生一個錯誤？ – DeborahK

該代碼正如我所添加的，div始終顯示。我的目標是向div或其他地方添加一個條件，只有當表中的一個或多個產品滿足我的條件時 - > updatedDate

我會向產品對象添加一個字段，您可以標記設置通知。如果您在HTML中或在調用Typscript控制器時動態完成該操作，則每次調用摘要循環時（基本上每次用戶與頁面交互或甚至單擊鼠標時）都會進行計算。如果你有很多對象，這可能需要很多處理。如果在第一次獲取它們時遍歷項目，並分配屬性，那麼您將節省大量處理。 – HaveSpacesuit

將一個名爲isOutDated（）的實用程序方法添加到支持頁面的Typscript代碼中，該代碼在產品中旋轉並返回一個布爾值。將* NgIf =「isOutDated（）」添加到帶有ID通知的div中

來源

2017-07-07 16:35:47 JGFMK

ngIf在Angular 2中顯示另一個DOM元素

回答

相關問題