HTML 使用 If 语句循环

Question

我正在使用 Ionic2/Angular2。我有一个 messages 的集合，我循环显示它们的详细信息。

<div *ngFor="let message of messages" class="message-wrapper">
  <div *ngIf="!exists(message)">
    <div *ngIf="message.changeDate">
      <center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
    </div>
    <div [class]="'message message-' + message.ownership">
      <div class="message-content">server:{{message.content}}</div>
      <span class="time-tick">
    <span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
      <div *ngIf="message.readByReceiver && senderId == message.senderId">
        <span class="checkmark">
          <div class="checkmark_stem"></div>
          <div class="checkmark_kick"></div>
      </span>
      </div>
      </span>
    </div>
  </div>
</div>

如您所见，我正在使用 if 语句 (<div *ngIf="!exists(message)">) 来决定是否显示 message 行。

我的问题是，即使我有 if 语句，它只显示正确的行，未显示的 messages 仍然占用滚动条 space。我的意思是，在未显示的 messages 所在的位置存在空白 space。

如您所见，在最后一条消息后有一些空白 space。

问题

我能否构造此 html，以便在筛选该行时它不会占用任何 space？

谢谢

Answer 1

这听起来更像是一个 html/css 问题。为 "message-wrapper" class 检查 css。也许将 class 移动到 ng-if 语句中，并将循环留在 div 上，没有 class.

Answer 2

将其包裹在一个 template tag 中并保持循环。模板不会被渲染，因此您可以将它们放在需要渲染逻辑的任何地方，同时使用 ngFor 和 ngIf。

<template ngFor let-message [ngForOf]="messages">
    <div *ngIf="!exists(message)" class="message-wrapper">
        <div *ngIf="message.changeDate">
            <center><span class="message-datetime">{{message.createdAt | amDateFormat: 'DD MMM YYYY'}}</span></center>
        </div>
        <div [class]="'message message-' + message.ownership">
            <div class="message-content">server:{{message.content}}</div>
            <span class="time-tick">
                <span class="message-timestamp">{{message.createdAt | amDateFormat: 'h:mm a'}}</span>
                <div *ngIf="message.readByReceiver && senderId == message.senderId">
                    <span class="checkmark">
                        <div class="checkmark_stem"></div>
                        <div class="checkmark_kick"></div>
                    </span>
                </div>
            </span>
        </div>
    </div>
</template>

HTML 使用 If 语句循环

HTML Loop with If Statement

angular2-template

angular