Question

根据角度 4 中的某些条件，单击子项中的按钮时从父项中的数组中删除特定组件实例

2020-04-10

921

javascript angular typescript parent-child

我遇到过一种情况，我想根据某些条件从子组件内部单击按钮时从数组（在父组件中）中删除组件实例。

在图片中，“添加 BU”按钮位于父组件中，下面的三个文本字段（即“BU”、“G 值”和“C 值”）和一个十字按钮来自子组件。每次单击“添加 BU”按钮时，都会在 UI 中创建一个来自子组件的新行。我使用以下代码将子实例推送到父级中的数组：-

现在我对这里的 2 点有疑问：- 1. 在同一实例的十字按钮单击时（十字按钮在子级内部），如何从父级中的数组中删除相同的特定子实例？ 2.单击“添加”按钮时，如何发送每行每个文本字段中添加的值（即“BU”、“G 值”和“C 值”）？

这里已经有人问过类似的问题，我使用了接受答案中给出的类似方法：单击 angular2 中的按钮将组件添加到 dom 。我的第一个问题也被问到，如下图的最后一条评论所示：

Answer 1

要删除子实例：

<payment-option
    *ngFor="let bu of buList; index as i"
    (delete)="removeBU(i)>
</payment-option>

removeBU(i: number) {
  this.buList.splice(i, 1);
}

要获取添加时的数据：

@ViewChildren(PaymentOptionComponent) paymentOptionComps!: QueryList<PaymentOptionComponent>;

add() {
  const data = {};
  this.paymentOptionComps.forEach(comp => {
    // Get data from comp and add to data here.
  });
}