根据 Angular5 中的变量重复 HTML 块

Question

我有一个表单，这个表单包含一个字段，旁边有两个按钮 +/-，因此用户可以添加或删除此类字段(最多五个(。

我在打字稿中有一个 var count来跟踪我有多少此类字段。

根据这个数字，我需要动态地显示表单的同一部分。

我该怎么做？

我在 Angular 中找不到一种方法来根据变量重复相同的 HTML 块，而且我无法对所有块进行编码并使用 ngIf 作为 HTML 块很大。

Answer 1

• 您可以使用角度形式的反应形式。使用表单生成器。
• 每当 + 和 - 时，将表单控件推送并弹出到表单数组中使用表单数组类上可用的方法单击按钮
• 与在点击事件上完成的视图相同，也会反映在视图中角度变化检测可以照顾到。
• 在 click 事件处理程序方法中，处理条件以根据表单数组的长度将推送的表单控件限制为 5。
• 在模板中使用div 上的 formArrayName 指令，在其中使用 ngFor 循环遍历表单数组中的控件，并将您想要循环的 html 与表单字段上的 [formControl] 指令一起放入其中

Answer 2

只需创建一个数组，该数组将包含您添加的每个div 的元素，创建一个如下函数：

addDiv(){
    if(this.divs.length<5){
        this.divs.push({id:this.divs.length});
    }
}

然后，在模板上，使用以下命令对其进行迭代：

<div *ngFor="let element of divs">
</div>