Question

我正在开发一个项目，我有一个用例，在点击添加按钮时添加一个新的列表项，添加的数据必须呈现为一个新的列表项。

添加内容组件

＆＃13;

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);
    }
  }
}

＆＃13;

contentlistcomponent

＆＃13;

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);
}
}

＆＃13;

当添加第一个内容时，列表正确地呈现键入的内容，但是当添加第二个内容时，先前的内容也被新内容替换，并且显示具有最后项目内容的两个列表项。因为我是新手，我无法弄清楚我哪里出错了。有人可以帮我解决这个问题吗？

修改我创建了一个显示问题的plunker，

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

Answer 1

问题是在 getContent 函数中为内容变量维护了对象引用。您需要执行以下操作才能推送到 contentList ，而无需保留先前值的引用。

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

希望它有所帮助!!

在emit期间向数组添加项会覆盖angular 4中的前一个元素

1 个答案: