HTML認爲對象未定義，當Typescript說它不是

我正在使用Ionic2遍歷messages的集合並將它們顯示在列表中。HTML認爲對象未定義，當Typescript說它不是

我有代碼輸出「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>

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...

UPDATE

很奇怪。

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

控制檯輸出鞋子message不null：我使用的測試。

存在：消息= TEST3，存在=假

但我仍然得到：

loading...

來源

2016-10-13 Richard

' ！消息'可以返回真值和太多的值，你應該檢查你需要的每個案例（例如，message = 0將返回true） – Supamiu

你正在檢查'消息&&！存在（消息）'這基本上'如果消息是定義並且_id小於0。你確定這就是你想要的嗎？ – rinukkusu

@rinukkusu是的，這是我想要的。我有一個本地和服務器消息的列表。存在確定如果它們已經在那裏（索引> -1）。 – Richard

通過檢查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

來源

2016-10-13 13:36:43 Supamiu

謝謝，...我正在努力。感謝幫助 – Richard

HTML認爲對象未定義，當Typescript說它不是

回答

相關問題