Угловой - Почему данные, которые я хочу отобразить, присутствуют, но не отображаются в поле зрения? - PullRequest
Новая
       7

Угловой - Почему данные, которые я хочу отобразить, присутствуют, но не отображаются в поле зрения?

0 голосов
/ 09 сентября 2018

EDIT:

Как указал @Mathias в комментариях, следующее *ngIf не работает: 

(*ngIf="currentUsername == chat.senderUsername else elseBlock1")

Но я не могу понять, почему он не работает, потому что currentUsername и chat.senderUsername оба существуют, не равны NULL и очень похожи. Я совсем растерялся: /

ОРИГИНАЛЬНЫЙ ПОЧТА:

Я новичок в Angular6 и часами борюсь с проблемой, в *ngFor отображаются все мои данные, кроме имени пользователя получателя / отправителя, даже если они оба присутствуют в моем NmChatRequest сущность.

Я пытался разместить теги ng-template вокруг тегов b, с оператором ? или без него, например, {{chat?.senderUsername}} на вид все и ничего не получалось. Я совершенно потерян, любая помощь будет приветствоваться.

Как вы видите в консоли, необходимые данные senderUsername и receiverUsername присутствуют и не равны нулю, см. Скриншот консоли разработчика:

enter image description here

Вот рендеринг:

enter image description here

Мой взгляд таков: 

<ng-container *ngFor="let chat of chats">
        <ion-item (click)="goToChat(chat?.id)">
          <ion-avatar item-start>
            <img *ngIf="currentImageUrl == chat.senderImageUrl else elseBlock" src="{{chat?.receiverImageUrl}}">
            <ng-template #elseBlock>
              <img src="{{chat?.senderImageUrl}}">
            </ng-template>
          </ion-avatar>
          <h2>
            <ng-template *ngIf="currentUsername == chat.senderUsername else elseBlock1">
              <ng-template *ngIf="chat?.senderRead == false else elseBlock2">
                <b>{{chat.receiverUsername}}</b>
              </ng-template>
              <ng-template #elseBlock2>{{chat.receiverUsername}}</ng-template>
            </ng-template>
            <ng-template #elseBlock1>
              <ng-template *ngIf="chat?.receiverRead == false else elseBlock3">
                <b>{{chat.senderUsername}}</b>
              </ng-template>
              <ng-template #elseBlock3>{{chat.senderUsername}}</ng-template>
            </ng-template>
          </h2>
          <p>{{chat?.lastMessage}}</p>
        </ion-item>
    </ng-container>

Заранее спасибо всем, кто найдет время, чтобы прочитать / ответить на мой пост.

Ответы [ 2 ]

0 голосов
/ 09 сентября 2018

ng-template предполагается использовать как ссылку на шаблон, а не как контейнер. Вы помещаете код внутри него, а затем отображаете его где-то еще, ссылаясь на шаблон (как в else из *ngIf). Если вы хотите применить только директиву, такую ​​как *ngIf, не заключая ваши элементы в <div *ngIf="...">, вы должны использовать ng-container.

Обычный способ использования *ngIf ... else - 

<ng-container *ngIf="condition; else temp>Stuff</ng-container>
<ng-template #temp>This doesn't get rendered on its own, only if referenced</ng-template>
0 голосов
/ 09 сентября 2018

По непонятной причине, когда я изменил тег ng-template этого ngIf на ng-container, он работал. У кого-нибудь есть объяснение? Сейчас это работает, но я не очень понимаю механику в этом вопросе. Спасибо @Mathias за правильное решение.

...