有没有办法计算Angular html页面中的所有循环布尔值

Question

是否有方法计算Angular html页面中的所有循环布尔值

this.items = [{
    id:1,
    isUpdate: false
  },
  {
    id:2,
    isUpdate: true
  },
  {
    id:3,
    isUpdate: true
  }

只要其中一个isUpdate值为true，无论有多少isUpdate值为true，通知组件都会显示并只显示一次。

我想知道是否有办法计算app.component.html页面中的布尔值，看看是否至少有一个isUpdate值为true并显示通知组件。而且我不想多次显示通知组件，只显示一次。

到目前为止，我的代码如下所示，它会多次显示通知：

app.component.html
<div *ngFor = "let notification of items">
  <notification *ngIf="notification.isUpdate"></notification>
</div>

和

Notification.component.html
<alert type="warning">
  <span class="icon-notification"></span>  Ready to update.
</alert>

提前谢谢。

Answer 1

编写一个如果应该显示通知将返回的函数：

showNotification(): boolean {    
  this.items.forEach(item => {
    if (item.isUpdate) {
      return true;
    }
  });

  return false;
}

并将其绑定到您的模板：

<notification *ngIf="showNotification()"></notification>