Angular5聊天系统链接数组

Question

实际上，我正在聊天，使用Angular，我可以动态生成频道聊天以及消息框。

我的问题，我没有成功将频道与相应的消息框绑定。

这是消息传递的外观

多数民众赞成在HTML渠道：

<div #listMeetches class="Messaging-container__infos__myMeetches">
 <ng-container *ngFor="let channel of channels">
  <div *ngIf="channel.is_active"  #item (click)="clickOnItem()" class="Messaging-container__infos__item">
   <img src="{{channel.src}}" class="Messaging-container__infos__item__img"/>
    <div class="Messaging-container__infos__item__text">
     <p class="Messaging-container__infos__item__text__name">{{channel.key}}</p>
     <p class="Messaging-container__infos__item__text__subtext">{{channel.last_message}}</p>
    </div>
   </div>
  </ng-container>
 </div>

多数民众赞成在HTML消息：

<div class="Messaging-container__discussion__middle__messageContainer">
  <ng-container *ngFor="let message of message1">
    <div *ngIf="message.id == 1" class="Messaging-container__discussion__middle__person1">
    <div class="Messaging-container__discussion__middle__person1__block">
      <img src="{{message.src}}" class="Messaging-container__discussion__middle__person1__block__img1"/>
      <div class="Messaging-container__discussion__middle__person1__block__dialog1">
        <p class="Messaging-container__discussion__middle__person1__block__dialog1__text1">
          {{message.text}}
        </p>
      </div>
    </div>
  </div>
  <div *ngIf="message.id == 2" class="Messaging-container__discussion__middle__person2">
    <div class="Messaging-container__discussion__middle__person2__block">
      <img src="{{message.src}}" class="Messaging-container__discussion__middle__person2__block__img2"/>
      <div class="Messaging-container__discussion__middle__person2__block__dialog2">
        <p class="Messaging-container__discussion__middle__person2__block__dialog2__text2"> 
          {{message.text}}
        </p>
      </div>
    </div>
  </div>
 </ng-container>
</div> 

那是我获得信息时的字典：

channels = [
    {
      "key": "1",
      "is_active": true,
      "src": "../../assets/img/vincent.jpg",
      "last_message": "Bonjour"
    }, {
      "key": "2",
      "is_active": true,
      "src": "../../assets/img/head2.png",
      "last_message": "Comment vas-tu ?"
    }, {
      "key": "3",
      "is_active": false,
      "src": "../../assets/img/vincent.jpg",
      "last_message": "Bien et toi ?"
    },
    {
      "key": "4",
      "is_active": false,
      "src": "../../assets/img/head1.png",
      "last_message": "Nooon"
    }, {
      "key": "5",
      "is_active": false,
      "src": "../../assets/img/head2.png",
      "last_message": "Bien aussi"
    }];




    message1 = [
      {
        "texte": "Bonjour",
        "src": "../../assets/img/head1.png",
        "sender": "Hichem",
        "is_read": true,
        "created_at": " ",
        "id": "1"
      },
      {
        "texte": "Toi aussi tu aimes les voyages ! C'est génial !",
        "src": "../../assets/img/head2.png",
        "sender": "Vincent",
        "is_read": true,
        "created_at": " ",
        "id": "2"
      },
      {
        "texte": "J'adore voyager moi aussi",
        "src": "../../assets/img/head1.png",
        "sender": "Hichem",
        "is_read": true,
        "created_at": " ",
        "id": "1"
      },
      {
        "texte": "Ah bah cool alors",
        "src": "../../assets/img/head2.png",
        "sender": "Vincent",
        "is_read": true,
        "created_at": " ",
        "id": "2"
      }
  ];

提前谢谢！ ：）