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

Question

我有一个例子，我想根据某些条件从子组件内部单击按钮，从数组（在父组件中）中删除一个组件的实例。

图中，'Add BU'按钮在父组件中，下面的三个文本字段（即'BU'、'G Value'和'C Value'）和一个十字按钮是来自子组件。在每个 'Add BU' 按钮上单击一个新行，子组件会在 UI 中创建。我使用以下代码将子实例推送到父数组中：-

现在我有关于 2 点的问题 :- 1. 我如何从父数组中删除相同的特定子实例，在同一个实例上单击十字按钮（十字按钮在子内部）？ 2. 如何在单击 'Add' 按钮时发送在每一行的每个文本字段中添加的值（即 'BU'、'G Value' 和 'C Value'）？

这里已经提出了一些类似的问题，我在接受的答案中使用了类似的方法：。我的第一个问题也作为下图中的最后一条评论被问到：

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

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

Remove a specific component instance from an array in parent on a button click in child based on some condition in angular 4

javascript

parent-child

typescript

angular