如何使用 angular 中的特定字段在 table 中生成空行 7

Question

我有一个 HTML 页面，如图所示。

这里 "Add Rows" 是一个按钮，其功能是创建一个空行，如图所示，用户可以在提供的框中输入详细信息。

因为我是 angular 7 的新手，请建议我最好的方法，并在可能的情况下添加示例代码片段。

Answer 1

在我看来最简单的方法是创建一个像

这样的变量

rowCount = [];

这是一个数组。

在您的 html 中，您创建了一个 ngFor 外观，您在其中迭代数组并创建了数组中的许多行。

addRow() 只是将一个项目推入数组，可能是一个模型。渲染新行会产生什么结果。

ts代码

criteriaFormArray = this.formBuilder.array()
....
private insertInFormArray(control: AbstractControl) {
    this.criteriaFormArray.push(control);
  }

效果图

<div
    formArrayName="criteria"
    *ngFor="
      let item of criteriaFormArray.controls;
      let i = index;
      let first = first;
      let last = last
    ">....</div>

如何使用 angular 中的特定字段在 table 中生成空行 7

How to generate an empty row in table with specific fields in angular 7

css-tables

angular