Ionic /Angular 2 : 点击添加新项后显示数组值

Question

我正在尝试通过 push 方法更新一个数组，并在视图中显示该数组。我无法将其显示在视图中。我从文本框中获取新值并尝试在视图中显示。请让我知道我在这里做错了什么？我得到的只是空行（在视图上），文本框中没有任何值，下面是 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})

干杯:)

Ionic /Angular 2 : 点击添加新项后显示数组值

Ionic /Angular 2 : Display array value after adding new items on click

arrays

ionic2

angular2-directives

angular