emit中に配列に項目を追加すると、角4の前の要素がオーバーライドされます

Question

プロジェクトの作業中です。追加ボタンをクリックすると新しいリスト項目が追加され、追加されたデータは新しいリストアイテム。

コンテンツコンポーネントを追加

import { Component,Output,EventEmitter} from '@angular/core'; 
 
@Component({ 
 
    selector: 'add-content', 
 
    template:`<input type='text' [(ngModel)] = 'content'/> 
 
      <button (click) = 'addNewContent(content)'>` 
 
}) 
 
export class AddContentComponent { 
 
    @Output() newContent: EventEmitter <any> = new EventEmitter(); 
 
    content: any; 
 
    constructor() { 
 
    this.content = {}; 
 
    } 
 
    addNewContent(content) { 
 
    if (content) { 
 
     this.content.body = content; 
 
     this.newContent.emit(this.content); 
 
    } 
 
    } 
 
}

contentlistcomponent

import {Component} from '@angular/core'; 
 

 
@Component({ 
 
    selector:'content-list', 
 
    template:`<ul> 
 
       <li *ngFor="let content of contentList">{{content.body}}</li> 
 
       <add-content (newContent)=getContent($event)></add-content> 
 
       </ul>` 
 
    
 
}); 
 
export class ContentListComponent { 
 
contentList:Array<any>; 
 
constructor(){ 
 
this.contentList = []; 
 
} 
 
getContent(content){ 
 
if(content){ 
 
    this.contentList.push(content); 
 
} 
 
}

最初のコンテンツがリストに追加され

は、私は初心者ですdisplayed.As正しくしかし、第2のコンテンツも新しいコンテンツと最後の項目の内容を持つ2つのリストの項目に置き換えられ、以前のコンテンツを追加されたときに型指定されたコンテンツをレンダリングしています私はどこに間違っているのか分かりませんでした。誰も私にこの問題を助けてくれますか？私は問題を示すplunkerを作成している

EDIT 、

https://plnkr.co/edit/Wgj4I9yAQjSxi1C91vnb?p=preview

Answer 1

問題は、オブジェクト参照がのgetContent機能にコンテンツ変数のために維持されることです。以前の値の参照を維持せずに、contentListにプッシュするには、以下を実行する必要があります。

getContent(content){ 
if(content){ 
    var copy = Object.assign({}, content); 
    this.contentList.push(copy); 
    } 
} 

希望すると助かります！