私の「AddZipcode」関数が、「Angular 2」アプリケーションのテンプレートビューに新しい値を表示していません

Question

私のAngular 2アプリでは、郵便番号を記載するコンポーネントを設定しています。ユーザーが郵便番号の削除と追加リストに追加します。削除機能は必要に応じて機能しています。しかし、pushメソッドを使用するaddZipcodeメソッドは、新しいリストを表すアイコンを既存のリストの下に追加していますが、実際の値は表示されません。

これは私が私のコンポーネント（簡潔にするために編集）を持っている、関連するコードです：

export class LocationsComponent implements OnInit { 

    zipcode; 
    addZipInput = false; 
    newZipcode; 

    zipcodes = [ 
    { zipcode: '94101' }, 
    { zipcode: '94105' }, 
    { zipcode: '94110' }, 
    { zipcode: '94115' }, 
    { zipcode: '94119' } 
    ]; 

    constructor() { 
    this.newZipcode = ''; 
    } 

    deleteZip(zipIndex: number) { 
    this.zipcodes.splice(zipIndex, 1); 
    } 


    addZipcode(event) { 
    this.zipcodes.push(this.newZipcode); 
    this.newZipcode = ''; 
    this.addZipInput = false; 
    event.preventDefault(); 
    } 

    addZipClicked() { 
    this.addZipInput = !this.addZipInput; 
    } 

    ngOnInit() { 

    } 
} 

...そして、ここで私は私のコンポーネントテンプレートビューで持っているものです。

<div class="page-section"> 

     <div class="header">Treatment Locations<span class="add-location" (click)="addZipClicked()"><i class="material-icons">add_circle</i>Add Location</span></div> 

     <div *ngIf="addZipInput"> 
     <!--<input placeholder="Zipcode to Add" autofocus> 
     <button md-raised-button [(ngModel)]="newItem" (click)="addZip()">Add</button> 
     </div>--> 
     <form (submit)="addZipcode($event)"> 
     <input [(ngModel)]="newZipcode" class="textfield" name="newZipcode"> 
      <button type="submit">Add</button> 
     </form> 
     </div> 
     <div class="section-body"> 
      <div class="field"> 
       <div *ngFor="let zipcode of zipcodes; let myIndex=index">{{zipcode.zipcode}}<span class="delete-option" (click)="deleteZip(myIndex)"><i class="material-icons">delete</i></span></div> 
      </div> 
     </div> 
    </div> 

ので、非常に具体的には、私が働こうとしているaddZipcode関数です。繰り返しますが、これは私が現在持っているものです。

addZipcode(event) { 
    this.zipcodes.push(this.newZipcode); 
    this.newZipcode = ''; 
    this.addZipInput = false; 
    event.preventDefault(); 
    } 

Answer 1

あなたはobject代わりのstringを挿入する必要がありますので、 `this.newZipcode`だけのように見えるん何

this.zipcodes.push({ zipcode: this.newZipcode });