Question

所以它关于选项卡和数组之间的双向绑定，向数组中添加元素可以很好地工作，但删除元素不起作用

模板：

<tab *ngFor="let brand of brands; let i = index"
    [heading]="brand.title"
    [removable]="true"
    (removed)="removeBrand(i)">
</tab>

组件：

private brands = [
    { title: 'Ford' },
    { title: 'Renault' },
    { title: 'Hyundai' },
    { title: 'Porsche' },
]

private addAndDelete() {
    this.brands = this.brands.slice().splice(0, 1)
    this.brands.push({ title: 'newcar' })
}

调用addAndDelete()时，我只会获得额外的“新车”。选项卡，但没有删除。这是一个错误还是我搞砸了？

Answer 1

首先，您不能拥有addAndDelete方法。删除和添加应该采用两种不同的方法！

添加：

add() {
  this.brands.push({title: 'newcar'})
}

你应该在你的标签中

(removed)="removeBrand(brand)"

和你的删除方法：

removeBrand(brand) {
  let index = this.brands.indexOf(brand);
  this.brands.splice(index, 1);
}

这应该可以正常工作：）

Answer 2

要实现这一点，我必须这样做：

@ViewChild(TabsetComponent) private tab: TabsetComponent;
removeBrand(brand){
  this.tab.removeTab(brand);
}

删除数组元素时，不会删除ng2-bootstrap动态选项卡

2 个答案: