-1
我想通過push方法更新數組，並在視圖中顯示數組。我無法將其顯示在視圖上。我從文本框中獲得新的值，並試圖在視圖中顯示。請讓我知道我在這裏做錯了什麼？我得到的是空行（上圖），沒有從文本框的值，下面是HTMLIonic/Angular 2：點擊添加新項目後顯示數組值
<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)
}
}