离子/角度 2 :单击添加新项目后显示数组值

Question

我正在尝试通过推送方法更新数组，并在视图中显示该数组。我无法在视图上显示它。我从文本框中获取新值，并尝试在视图中显示。请让我知道我在这里做错了什么？我得到的只是空行(在视图上(，文本框中没有值，下面是 HTML

<ion-row>
<ion-col col-12 text-left>
<div class="talk-bubble tri-left border">
<p class="talktext">Hello, are you there?
</p>
</div>
</ion-col>
</ion-row>
<ion-row *ngFor="let m of messages">
<ion-col col-12 text-left>
<div class="talk-bubble tri-left border">
<p class="talktext">{{m.message}}</p>
</div>
</ion-col>
</ion-row>

</ion-content>
<ion-footer>
<ion-toolbar>
<form [formGroup]="chatForm" (ngSubmit)="onSubmit(chatForm.value,chatValue)">
<ion-row>
<ion-col col-10>
<input type="text" [formControl]="chatText" [(ngModel)]="chatValue" class="message-text" placeholder="Message.." />
</ion-col>
<ion-col col-2 align-items-left>
<button type="submit" [disabled]="!chatForm.valid"><ion-icon name="send"></ion-icon></button>
</ion-col>
</ion-row>
</form>
</ion-toolbar>
</ion-footer>

以下是 TS：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ProfilePage } from '../profile/profile';
import { ActionSheetController } from 'ionic-angular';
import {FormBuilder,  FormGroup, Validators, AbstractControl} from '@angular/forms';
@Component({
selector: 'page-userchat',
templateUrl: 'userchat.html'
})
export class UserChatPage {
chatForm : FormGroup;
chatValue : string;
chatText : AbstractControl;  
messages = [];
constructor(public navCtrl: NavController,public actionSheetCtrl : ActionSheetController, private fb : FormBuilder) {
this.chatForm = fb.group({
'chatText':['',Validators.compose([Validators.required])],
})
this.chatText = this.chatForm.controls['chatText']
}
navProfilePage(){
this.navCtrl.push(ProfilePage);
}
userChatPage(chatID){
console.log(chatID);
}
presentActionSheet(){
let actionSheet = this.actionSheetCtrl.create({
title:'Chat Options',
buttons:[
{
text:'Clear chat',
icon : 'close',
handler: () =>{
}
},
{
text:'Email me this conversation',
icon:'mail'
},
{
text:'Cancel',
role:'cancel',
icon:'close-circle'
}
]
});
actionSheet.present();

}
onSubmit(value:string,chatValue:string): void {
this.messages.push([{"message":this.chatValue}])
//this.messages = this.messages.slice();
//console.log(this.chatValue);
this.chatValue = null;
console.log(this.messages)
}
}

Answer 1

我明白问题是什么。 我传递的是一个对象而不是字符串。

这是错误的this.messages.push([{"message":this.chatValue}])应该是this.messages.push({"message":this.chatValue})

欢呼:)