如何在 Angular 中使用动态生成多个无线电组

Question

我正在尝试根据数据库中的数据生成包含标签和两个收音机的列表。

component.html代码：

<li *ngFor="let method of testMethods">
     {{ method }}
     <input type="radio" [(ngModel)]="stepResult" name={{method}} value="pass">Pass
     <input type="radio" [(ngModel)]="stepResult" name={{method}} value="fail">Fail
 </li>

component.ts 代码（testMethods 包含示例值）

testMethods: string[] = ["First step", "Second step", "Third step"];
stepResult;

我想要实现的是如下所示的列表：

第一步（）通过（）失败
第二步（）通过（）失败
第三步()通过()失败

我的问题是当我 select "Pass" 一步时，所有 "Pasess" 都被 selected。我做错了什么？

Answer 1

您将所有输入与一个变量 stepResult 绑定，因此当发生变化时，所有输入都会更新。例如，您可以将 stepResult 设为值数组：

 <li *ngFor="let method of testMethods; let i = index">
     {{ method }}
     <input type="radio" [(ngModel)]="stepResult[i]" name={{method}} value="pass">Pass
     <input type="radio" [(ngModel)]="stepResult[i]" name={{method}} value="fail">Fail
 </li>

并且在组件中：

stepResult = [];

如何在 Angular 中使用动态生成多个无线电组

How to dynamically generate many radio groups using in Angular

typescript

angular2-forms

angular