HTML думает, что объект не определен, когда TypScript говорит, что это не

Я использую Ionic2 для итерации по коллекции messages и отображения их в списке.HTML думает, что объект не определен, когда TypScript говорит, что это не

У меня есть код для вывода "loading..." если есть message item is 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' может возвращать true с слишком большим количеством значений, вы должны проверить каждый случай, который вам нужен (например, message = 0 вернет true) – Supamiu

Вы проверяете 'message &&! exists (message)', который в основном 'if message is и его _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 думает, что объект не определен, когда TypScript говорит, что это не

ответ

Смежные вопросы