Как основать внутренний NgFor на внешнем NgFor в Angular - PullRequest
Новая
       18

Как основать внутренний NgFor на внешнем NgFor в Angular

4 голосов
/ 20 марта 2019

Я пытаюсь отобразить список разговоров в моем приложении Angular, а затем отобразить сообщения, содержащиеся в этих различных беседах под каждым Заголовок разговора .

Вот мой последний код-

HTML: 

<div
   class="card"
   style="width: 18rem;"
   *ngFor="let conversation of myConversations"
>
<div class="card-body">
    <h5 class="card-title">{{ conversation.conversationTitle }}</h5>
    <h6 class="card-subtitle mb-2 text-muted">
       Conversation ID: {{ conversation.conversationId }}
    </h6>
    <p *ngFor="let message of myConversationMessages" class="card-text">
       {{ message.messageText }}
    </p>
</div>

TS: 

myConversations: IConversation[] = [];
myConversationMessage: IConversationMessages = {
conversationId: 0,
messageId: 0,
messageText: ''
}; 
myConversationMessages: IConversationMessages[] = [];
constructor(private conversationService: ConversationService) {}

ngOnInit() {
this.conversationService.getConversations().subscribe(conversations => {
  this.myConversations = conversations;
  this.displayMessages();
});
}

displayMessages() {
for (let i of this.myConversations) {
  for (let j of i.messages) {
    this.myConversationMessages.push({
        conversationId: i.conversationId,
        messageId: j.messageId,
        messageText: j.messageText
    });
  }
}
console.log(this.myConversationMessages);
}

Это то, что я могу отображать в данный момент:

enter image description here

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

Я думаю, что мне нужно внести некоторые изменения во внутренний ngFor , но я не совсем уверен, какое изменение сделать.Любые идеи о том, какие изменения необходимы?Спасибо!

Также вот соответствующий JSON: 

[
  {
    "conversationId": 1,
    "conversationTitle": "My first convo",
    "messages": [
      {
        "messageId": 1,
        "messageText": "Hi"
      },
      {
        "messageId": 2,
        "messageText": "Hello"
      }
    ]
  },
  {
    "conversationId": 2,
    "conversationTitle": "My second convo",
    "messages": [
      {
        "messageId": 1,
        "messageText": "test"
      },
      {
        "messageId": 2,
        "messageText": "testing"
      }
    ]
  }
]

1 Ответ

5 голосов
/ 20 марта 2019

На основе предоставленного вами JSON вы сможете использовать *ngfor внутри *ngfor для чтения сообщений.Я убрал некоторые элементы, но следующее должно дать вам нужный результат.На основании JSON в вопросе.

Решение 

<div class="card" style="width: 18rem;" *ngFor="let conversation of myConversations">
    <div class="card-body">
        <h5 class="card-title">
            {{ conversation.conversationTitle }}
        </h5>

        <h6 class="card-subtitle mb-2 text-muted"> Conversation ID:
            {{ conversation.conversationId }}
        </h6>

        <div *ngFor="let message of conversation.messages" class="card-text">
            <span>
                {{ message.messageText }}
            </span>
        </div>
    </div>
</div>

Если JSON является исходным myConversations, вам не нужно больше ничего делать с этими данными, поскольку этого уже достаточно для работыс.

...