Question

我正在使用angular开发应用程序。

我从通知数组中显示通知。它们来自插座连接。

<div class="notifications-container">
  <div *ngFor='let notification of notifications'>

        <div class="notification-messege" title="{{notification.body.content}}">
            {{notification.body.content}}
        </div>

    </div>
  </div>

如果有超过5个通知，我该如何隐藏？

Answer 1

如果您要显示前5个通知。您可以使用index和* ngIf。

<div class="notifications-container">
  <div *ngFor='let notification of notifications; let i = index'>

        <div *ngIf = "i<5" class="notification-messege" title="{{notification.body.content}}">
            {{notification.body.content}}
        </div>

    </div>
  </div>

使用slice pipe

<div class="notifications-container">
  <div *ngFor='let notification of notifications | slice:0:5;'>

        <div class="notification-messege" title="{{notification.body.content}}">
            {{notification.body.content}}
        </div>

    </div>
  </div>

显示最近五个通知：

<div class="notifications-container">
      <div *ngFor='let notification of (notifications | slice:notifications.lenght- 5)'>    
            <div class="notification-messege" title="{{notification.body.content}}">
                {{notification.body.content}}
            </div>    
        </div>
   </div>

Answer 2

您可以使用Angular的*ngIf指令限制要显示的通知。

将您的代码修改为以下内容：

<div class="notifications-container">
  <div *ngFor='let notification of notifications'>

        <div *ngIf="noitications.length<=5" class="notification-messege" title="{{notification.body.content}}">
            {{notification.body.content}}
        </div>

    </div>
</div>

注意*ngIf="noitications.length<=5"，此处如果notifications数组中存储的通知数量超过5，则notification-message将不会显示。

在Angular（4）应用程序中获取DOM元素数量

2 个答案: