javascript - Angular 2子组件从父组件数组中删除项目

Question

当前，子组件尝试删除父组件的数组时遇到问题。

父组件:

@Component({
    selector: 'parent',
    templateUrl: 'app/templates/parent.html'
})

export class ParentComponent {

    public items = [];
}

父 HTML

  <child [items]="items"></child>
  <product *ngFor="let item of items><product>

子组件

@Component({
    selector: 'child',
    templateUrl: 'app/templates/child.html'
})

export class ChildComponent{
    @Input() items;

    emptyItems() {
        this.items = [];
    }
    addItem() {
        this.items.push({'title': 'foo'});
    }
}

但是，当我调用emptyItems/addItem函数时， subview 中的项目数组将反射(reflect)更改，但在父组件上它不会更改。

我需要使用输出吗？

Answer 1

正确的方法是使用Output https://angular.io/docs/ts/latest/cookbook/component-communication.html#

但是，我们可以在您的项目上使用双向绑定(bind)，这将反射(reflect)双方的更改:

<child [(items)]="items"></child>

查看更多详情https://angular.io/docs/ts/latest/guide/cheatsheet.html

更新:尝试以不同的方式清空数组 How do I empty an array in JavaScript?

输出应该可以工作 https://angular.io/docs/ts/latest/api/core/index/Output-var.html这个想法是，您必须将更新的内容从子传递到父，并手动更新父的成员items