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仍占用滚动空间。我的意思是有空格，其中显示的是messages。

正如您在此处所见，最后一条消息后面有一些空格。

问题

我可以构造这个html，这样如果行被过滤，它不会占用任何空间吗？

由于

Answer 1

将其包裹在持有循环的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>

Answer 2

这听起来更像是html / css问题。检查css中的“message-wrapper”类。也许在ng-if语句中移动该类，并将循环保留在没有类的div上。

带有If语句的HTML循环

2 个答案: