时间戳

首页 > 解决方案 > 如何在 *ngFor 中添加依赖于数据的单个元素？

angular - 如何在 *ngFor 中添加依赖于数据的单个元素？

问题描述

我有一个应用程序，我在其中循环遍历一组 alertMessages。对于每个 alertMessage，我正在检查所有参数是否有效（alertmessage 未标记为已删除、已读取等）以及它是否已在今天创建。如果所有这些参数都无效，我不想显示警报消息。

但我也想显示一个包含单词“Today”的 h2 元素。但是，这个 h2 应该只显示一次，并且只有在呈现警报消息时才显示。

警报-page.component.html

<ng-container *ngFor="let alertMessage of alertMessages$ | async">
  <ng-container *ngFor="let recipient of alertMessage.recipients">
    <ng-container *ngIf="parametersAreValid(recipient) && wasCreatedToday(alertMessage)">
      <alert [alertRecipient]="recipient [alertMessage]="alertMessage"> 
      </alert>
    </ng-container>
  </ng-container>
</ng-container>

警报-page.component.ts

    parametersAreValid(alertRecipient: AlertRecipient): boolean {
        const isForCurrentUser = alertRecipient.recipientId === this.currentUser.id;
        const isNotMarkedAsDeleted = !alertRecipient.isDeleted;
        const isNotMarkedAsRead = !alertRecipient.isRead;
        const isShownWhenShowDeletedIsSetToTrue = (alertRecipient.isDeleted && this.showDeleted);
        const isShownWhenShowReadIsSetToTrue = (alertRecipient.isRead && this.showRead);
        return (isForCurrentUser) && (isShownWhenShowDeletedIsSetToTrue || isNotMarkedAsDeleted) &&
            (isNotMarkedAsRead || isShownWhenShowReadIsSetToTrue);
    }


    wasCreatedToday(alertMessage: AlertMessage): boolean {
        const today = moment();
        const alertSentAt = moment(alertMessage.sentAt);

        return moment(alertSentAt).isSame(today, 'day');

    }

标签： angularangular-template

解决方案

您可以使用 ngrx-utils 库的 ngLet 指令。https://github.com/ngrx-utils/ngrx-utils 使用此指令，您可以将 allertmessages 存储在模板中的局部变量中。然后，您可以检查 alertMessages.lenght > 0 并使用 *ngIf 指令显示 h2。

但是，我同意卡米尔的观点，即您不应该在模板中添加太多逻辑

推荐阅读