Массив ссылок системы чата Angular5 - PullRequest
Новая
       27

Массив ссылок системы чата Angular5

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

На самом деле, я работаю над чатом, с Angular я динамически генерирую чаты каналов, а также окно сообщений.

Моя проблема, мне не удалось связать канал с соответствующим окном сообщения.

Вот как выглядит сообщение

image

Вот 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"
      }
  ];

Заранее спасибо! :)

...