将ngModel输入绑定到Angular中的表单数组答案

【问题标题】：Binding ngModel input to form array in Angular将ngModel输入绑定到Angular中的表单数组
【发布时间】：2019-12-02 11:35:24
【问题描述】：

我想创建 *ngFor 绑定以使用数组和 ngModel 输入创建另一个表单。

因此，当我选择其中的值时，我单击按钮以显示具有不同值的新表单。

任何想法应该如何工作？

我已经尝试过了，但结果与其他 ngModel 值相同。

这是用于我公司的 Progress Tracker，使用 Clarity-VMWare 在AngularJS 8 上运行。我试过使用 let i = index 并没有得到值。

HTML：

<div class="card card-report" *ngFor="let item of report">
    <div class="card-block block-card">
        <div class="card-title">
            <div class="clr-wrapper">
                <select class="clr-select-1" [(ngModel)]="selectedProjects">
                    <option [ngValue]="default" disabled>Project yang kamu kerjain apa?</option>
                    <option [ngValue]="item" *ngFor="let item of listProjects">
                        {{item.name}}
                    </option>
                </select>
            </div>

            <div class="clr-wrapper">
                <select class="clr-select-2" [(ngModel)]="selectedRoles">
                    <option [ngValue]="default" disabled>Kamu jadi apa di project ini?</option>
                    <option [ngValue]="item" *ngFor="let item of listRoles">
                        {{item.name}}
                    </option>
                </select>
            </div>
        </div>
        <div class="card-text text-card">
            <p class="sub-text-card">Kamu belum melakukan apa-apa</p>
        </div>
    </div>
</div>

TS：

listProjects: any[]
listRoles: any[]
selectedProjects: any;
selectedRoles: any;

addReport() {
  this.report.push(this.report.length)
}

表单数组正在工作，但我想知道该值应该与其他选择有何不同。我希望的结果是：应该像添加新的表单数组，但其中的值可以更改。

【问题讨论】：

尝试使用另一个名称作为值，而不是第二个 *ngFor 中的项目

标签： arrays angular bind ngmodel

【解决方案1】：

虽然你问的不是很清楚。但我看到的一个可能的问题是 [ngValue]。您可以尝试改用 [value]。

 <option [value]="item.name" *ngFor="let item of listProjects">
       {{item.name}}
 </option>

【讨论】：