Question

我正在尝试在for循环中的html选择中添加选项。要使用[（ngModel）]获取所选选项，但默认情况下不会选择任何选项。

示例代码：

<table align="center">
    <tr *ngFor="let d of data; let i = index">
        <td>
          <select id="status" [(ngModel)]="d.status" name="d.status" (change)="onStatusChange(i, d.id)">
            <option *ngFor="let o of statusArray" [ngValue]="o">{{o.name}}</option>
          </select>
        </td>
    </tr>
</table>

这是我正在使用的组件：

export class AboutComponent implements OnInit {
    statusArray;
    data;

  constructor() { }

  ngOnInit() {
    this.statusArray = [
        {
            "id": 1,
            "name": "Testing"
        },
        {
            "id": 2,
            "name": "Free Trial"
        },
        {
            "id": 3,
            "name": "Active/Paying"
        }
    ];

    this.data = [
        {
            "id": 2,
            "status": {
                "id": 1,
                "name": "Testing"
            },
            "new": false
        },
        {
            "id": 3,
            "status": {
                "id": 1,
                "name": "Testing"
            },
            "new": false
        },
        {
            "id": 4,
            "status": {
                "id": 2,
                "name": "Free Trial"
            },
            "new": false
        }
    ];
  }

}

输出：

在输出中我得到列表中的选项但未选择默认值：

Answer 1

尝试替换它：

<option *ngFor="let o of statusArray" [ngValue]="o">{{o.name}}</option>

使用：

<option *ngFor="let o of statusArray" [ngValue]="o.id">{{o.name}}</option>

o是一个数组，因此您的选项不存在任何值。

Answer 2

您可以使用以下方式默认设置：

[(ngModel)]="d.status"

在d.status中设置要设置的默认值。

Answer 3

您比较选项以<div id="content"> </div>属性选择，如果您使用的是角度4。

HTML文件：

compareWith

TS文件

<select [compareWith]="byAnimal" [(ngModel)]="selectedAnimal">  
  <option *ngFor="let animal of animals" [ngValue]="animal">
    {{animal.type}}
  </option>
</select>

此link

中最佳解决方案之一

Answer 4

我有同样的问题。解决方案是确保每个项目的选择名称属性都不同。

更改

name="d.status"

到

name="d.status{{i}}"

ngModel不在for循环中的select选项中工作

4 个答案: