单击后重复 div 元素[关闭]

Question

我需要的是，单击按钮（添加）会生成一个由字段和删除按钮组成的表单。当您单击按钮时，它应该删除所有表单字段和删除按钮本身

<button type="button" class="btn btn-outline-success" (click)="AddBtn()"><span class="fa fa-plus"></span>Add</button>

<div *ngIf="isformes" >
  
<div>
  <form>
      <table>
          <div>
            
              <tr>
            
                  <td>
                      <mat-form-field ">
                          <mat-label>Name</mat-label>
                          <input matInput placeholder="Name"  autocomplete="off" required>
                      </mat-form-field>
                  </td>
               </tr>
          </div>
       </table>
   </form>
   <button type="button" class="btn btn-outline-success" (click)="DelBtn()"><span class="fa fa-plus"></span>Delete</button>
   </div>

现在在顶部的代码中，我们有一个添加按钮。然后我们有一个带有删除按钮的表单。我需要的是，当我单击添加按钮时，此表单应与删除按钮一起出现。然后当我单击删除按钮时，表单和删除按钮应该会消失。

另一件事是，如果我第二次单击添加按钮，我应该会得到一个表单以及删除按钮。对于每次点击，这应该重复。

Answer 1

使用*ngFor，您可以循环遍历数组并在 UI 上显示内容 在 TS 文件中

  isformes = true;
  formsArray = [""];
  DelBtn = delIndex => this.formsArray.splice(delIndex, 1);
  AddBtn = () => this.formsArray.push("");

HTML 文件

<ng-container *ngFor="let i of formsArray; let j = index">
    <div *ngIf="isformes">
      <!-- Other staffs here -->
   </div>
</ng-container>

See Sample Link

Answer 2

我建议创建一个包含输入字段和删除按钮的新表单组件，然后在用户单击添加按钮时动态加载该组件。

您需要使用 componentFactoryResolver，它将返回 componentFactory 并使用它您可以动态创建组件并使用 ng-template 将其添加到 UI 中。

addForm = () => {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(
      FormComponent
    );
    const component = this.container.createComponent(componentFactory);
    component.instance.removeForm.subscribe((x) => {
      this.removeForm();
    });
    this.components.push(component);
  };

要删除您的组件，请在您的 formComponent 中公开一个输出参数，当用户单击您的父组件时，它将发出该事件，您可以在此处使用以下代码从 UI 中删除该组件。

 removeForm = () => {
    const component = this.components.find(
      (component) => component.instance instanceof FormComponent
    );
    const componentIndex = this.components.indexOf(component);

    if (componentIndex !== -1) {
      this.container.remove(this.container.indexOf(component));
      this.components.splice(componentIndex, 1);
    }
  };

这里是示例代码框：- https://codesandbox.io/s/pensive-butterfly-p8gl9?file=/src/index.html