Question

不确定这是否可行，但我正在构建一个动态的HTML产品表。我正在评估每个产品＆＃34; updatedDate＆＃34;并确定该日期是否小于当前日期减去7天 - todayMinusSeven 天是我在我的TypeScript组件文件中声明的变量，将其初始化为当前日期减去七天：

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

我正在试图弄清楚如何显示我的id＆＃34的div元素;注意＆＃34;来自HTML表格中的* ngIf条件。基本上，如果任何产品的updatedDate小于当前日期减去七天，则显示＆＃34; notice＆＃34; 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>

我是否需要在HTML或组件TypeScript文件中执行此操作我不确定，我从HTTP服务类获取产品列表并将其订阅到Product对象数组，所以我不希望不必须遍历此条件的数组，因为它已经在HTML标记中遍历。用Angular 2/4在HTML中可以做到这一点吗？

谢谢！

Answer 1

我处理这个问题的方法是在你的OnInit中创建一些东西（或者你的数据被解析后 - 也许是OnChanges），你在那里处理你的数组并确定是否有任何值小于所需的日期。您希望在前/后过程中执行此操作，以防止Angular在每次必须通过更改检测刷新DOM时在函数中调用此函数。最好将* ngIf绑定到组件上的public / protected属性，而不是每次计算。

我创建了Stackblitz example我的意思

Answer 2

将一个名为isOutDated（）的实用程序方法添加到支持页面的Typscript代码中，该代码旋转产品并返回一个布尔值。将* NgIf =“isOutDated（）”添加到带有id通知的div

ngIf在Angular 2中显示另一个DOM元素

2 个答案: