Question

我正在使用Ionic2迭代messages的集合并将其显示在列表中。

如果loading...项为message，我有输出“undefined”的代码。它会在屏幕上显示“loading...”，表示message为undefined。但我也记录了!exists(message)的输出，它表明message不是undefined。因此，html似乎与ts不一致。

这怎么可能？我有什么想法可以解决这个问题吗？

HTML

    <div *ngFor="let message of messages" class="message-wrapper">
        <div *ngIf="message && !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">local:{{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 *ngIf="!message">
            <p>loading messages...</p>
        </div>
    </div>

TS

  public exists(message: Message): boolean {
    console.log('exists: message = '+message.content+',   exists = '+(this.localMessageIds.indexOf(message._id) > -1));
    if (message) {
      return this.localMessageIds.indexOf(message._id) > -1;
    }
    true;
  }

输出：

exists: message = test1, exists = false

您可以看到message项目不是undefined，因为它有content“test1”。但屏幕显示：

loading messages...

更新

很奇怪。我正在测试使用：

        <div *ngIf="message == null">
            <p>loading...</p>
        </div>

message不是null的控制台输出鞋。

存在：message = test3，exists = false

但我仍然得到：

loading...

Answer 1

只需检查messages长度而不是!message：

，即可更改模板

<div *ngFor="let message of messages" class="message-wrapper">
        <div *ngIf="message && !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">local:{{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>
<div *ngIf="messages.length === 0">
    <p>loading messages...</p>
</div>

如果您没有消息，您的目标是显示加载消息，因此您不必检查每条消息，因为如果您没有任何消息，您的*ngIf将无法评估，因为messages.length === 0

HTML认为对象是未定义的，当Typescript说它不是

1 个答案: