时间戳

首页 > 解决方案 > 根据角度 4 中的某些条件，在子项中单击按钮时从父项中的数组中删除特定组件实例

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

问题描述

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

在此处输入图像描述

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

在此处输入图像描述

在此处输入图像描述

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

这里已经提出了一些类似的问题，我使用了接受的答案中给出的类似方法：Add component to dom on click of button in angular2。我的第一个问题也被问到下图中的最后一条评论：

在此处输入图像描述

标签： javascriptangulartypescriptparent-child

解决方案

要删除子实例：

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

推荐阅读