Пользовательский интерфейс чата для ionic3 с диалоговым потоком

Question

Я создал интерфейс чата всякий раз, когда я отправляю сообщения в поток диалогов или получаю сообщения из потока диалогов, они появляются в левой части экрана.Я хочу, чтобы мои сообщения были справа, а сообщения диалогового потока - слева, и оба пузыря чата должны быть разных цветов.Я понятия не имею, как их дифференцировать.Кто-нибудь может мне помочь?Это мой код HTML.

<ion-content>
  <div style="font-size:10px; text-align:center;">7 minutes ago</div>
  <div class="msgbubble" *ngFor="let msg of messages">
    <div class="innermsg">
      {{ msg }}
    </div>
  </div>
</ion-content>

<ion-footer>
  <ion-toolbar>
    <ion-input placeholder="Type here" [(ngModel)]="question" type="text"></ion-input>
    <ion-buttons right>
      <button ion-button clear icon-only id="sendicon" (click)="ask(question)">
        <ion-icon name="send"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>

Это код ts.

ask(question) {
    try {
      this.messages.push(question);
      var headers = new Headers();
      headers.append("Accept", 'application/json');
      headers.append('Content-Type', 'application/json' );
      headers.append('Authorization', 'Bearer ' + this.Access_token)
      let options = new RequestOptions({ headers: headers });

      let postParams = {
       "lang": "en",
      "query": question ,
      "sessionId": "12345",
      "timezone": "America/New_York"
      }

      try{
      this.http.post("https://api.dialogflow.com/v1/query?v=20150910", postParams, options)
        .subscribe(data => {
          let obj = JSON.parse(data['_body']);
          this.answer = obj.result.fulfillment.speech;
          //console.log(data['_body']);
          console.log(this.answer);
          this.messages.push(this.answer);

         }, error => {
          console.log(error);// Error getting the data
        });
    }
    catch(e){
      console.log(e);
    }
    }

  catch(e){
    console.log(e);
  }
  }

Я хочу, чтобы пользовательский интерфейс был как обычная страница чата / бот.Отправка сообщений справа и получение сообщений слева.

Answer 1

Объекты в вашем массиве «messages» должны иметь атрибут, указывающий, является ли сообщение вопросом или ответом (было бы неплохо, если бы вы добавили интерфейс «message» к вашему вопросу).в angular вы можете изменить классы css по условию:

<div [className]="condition ? 'example-class' : 'other-class'"></div>

Надеюсь, что это решит вашу проблему!