Hi I have a problem in displaying in ion-list from the array. I used chrome inspect and it was not successful. Anyone can help?
Thank you!
Below are my codes:
home.html
<ion-header>
<ion-navbar>
<ion-title>
Chat
</ion-title>
</ion-navbar>
</ion-header>
<!--<ion-content>
<ion-list>
<ion-item *ngFor="let question of questionList">
{{question}}
</ion-item>
</ion-list>
</ion-content> -->
<ion-content>
<ion-list>
<ion-item *ngFor="let answer of answersList">
{{answer}}
</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar position="bottom">
<ion-row style="align-items: stretch">
<ion-col width-90>
<input ion-textarea type="text" id = "inputText" [(ngModel)]="question" placeholder="Type a message..">
</ion-col>
<ion-col>
<button ion-button round (click)="ask()">Send</button>
</ion-col>
</ion-row>
</ion-toolbar>
<!--<div *ngFor="let answer of answers">
{{answer}}
</div>
-->
</ion-footer>
home.ts
import { Component, NgZone } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NavParams, AlertController } from 'ionic-angular';
import { Platform } from 'ionic-angular';
import { Parse } from 'parse';
// declare var ApiAIPromises: any;
declare var ApiAIPlugin: any;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
answersList: any = [];
questionList = [];
question;
data: String;
response;
constructor(public platform: Platform, public ngZone: NgZone, public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
platform.ready().then(() => {
ApiAIPlugin.init(
{
clientAccessToken: "TOKEN", // insert your client access key here
lang: "en" // set lang tag from list of supported languages
},
result => { console.log('API AI ONLINE: ', result)},
error => { console.log('API AI OFFLINE: ', error)}
);
// ApiAIPromises.init({ //error
// clientAccessToken: "TOKEN"
// })
// .then((result) => console.log("Hi I'm Mabel: " + result))
});
}
ask() {
console.log("User input question: " + this.question);
// ApiAIPlugin.requestText({
// query: this.question
// })
// .then(({result: {fulfillment: {speech}}}) => {
// this.ngZone.run(()=> {
// this.answer.push.apply(speech);
// console.log("Hey I manage to print second message");
// });
// })
try {
ApiAIPlugin.requestText(
{
query: this.question
},
function (response) {
// place your result processing here
response = response.result.fulfillment.speech;
console.log("Response: "+ JSON.stringify(response));
//this.answersList.save(response);
//alert(JSON.stringify(response));
//this.userEnter();
},
function (error) {
// place your error processing here
console.log("Error: "+ JSON.stringify(error));
alert(error);
});
} catch (e) {
console.log("Error: "+ JSON.stringify(e));
alert(e);
}
this.answersList.push(this.response);
console.log("Stored");
}
load() {
let self = this;
var promises = [];
//function success (answersList) {
for (var a = 0; a > this.answersList ; a++) {
var promise = new Parse.Promise();
var responseFrm = this.answersList[a];
var answer = responseFrm.getAnswer();
self.answersList.push(answer);
//this.answersList.push(response);
promise.resolve(responseFrm);
promises.push(promise);
console.log("Sent");
}
Parse.Promise.when(promises).then(
function (answersList) {
console.log("Getting: " + JSON.stringify(answersList));
}
)
//}
}
public getAnswer() {
return this.data;
}
public setAnswer(data: String) {
this.data = data;
}
}