每当我向对话流发送消息或从对话流接收消息时,我都会创建一个聊天界面,它们会显示在屏幕左侧。我希望我的消息在右侧,对话流消息在左侧,两个聊天气泡应该有不同的颜色。我不知道如何区分它们。有人能帮我吗? 这是我的 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);
}
}
我希望 UI 应该是一个通用的聊天页面/机器人。右侧发送消息,左侧接收消息。
最佳答案
数组“messages”中的对象需要有一个属性来指示消息是问题还是答案(如果将“message”的接口(interface)添加到问题中会很好)。 在 Angular 中,您可以按条件更改 css 类:
<div [className]="condition ? 'example-class' : 'other-class'"></div>
希望能解决您的问题!
关于css - 使用 dialogflow 的 ionic 3 聊天 UI,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50762434/