select 元素的双向绑定无法正常工作 | Angular 11

Question

我有一个 JSON 结构：

对于item

"item": {
        "pk": "123456",
        "title": "Title4",
        "list_fields": [
            {
                "pk": "12345",
                "title": "Selector",
                "type": "SEL",
                "position": 1,
                "locked": true,
                "value": {
                        "pk": 567,
                        "value": "Finished",
                        "position": 3,
                        "color": "FF0000"
                }
            }
        ]           
    },

为其select或

"field": {
  "pk": "12345",
  "type": "SEL",
  "locked": true,
  "position": 1,
  "values": [
      {
          "pk": 123,
          "value": "Not Started",
          "position": 1,
          "color": "FF0000"
      },
      {
          "pk": 345,
          "value": "In Process",
          "position": 2,
          "color": "FF0000"
      },
      {
          "pk": 567,
          "value": "Finished",
          "position": 3,
          "color": "FF0000"
      }
    ]
}

所以，我尝试制作一个简单的 select 或者，在我可以看到当前 list_fields 值的地方，它是 field

的一部分

    <ng-container *ngFor="let list_field of item.list_fields">

            <select [(ngModel)]="list_field.value" [name]="list_field.pk" [id]="list_field.pk">
                <option disabled>Select value</option>
                <option *ngFor="let val of field.values" [ngValue]="val">{{ val.value }}</option>
            </select>
        
    </ng-container>

当我制作这个 selector 时，我遇到了问题：当页面加载时，selector 是空的（看起来，当前值没有通过 [= 绑定到 select 元素18=])

但是当我从 select 下拉列表开始 select 值时，selected 值毫无问题地绑定到项目。

我需要做什么才能将 CURRENT 值绑定到 select 或者，当页面加载时？

Answer 1

如果您使用 ngValue 作为选项的值，这意味着您需要将 list_field.value 设置为 field.values 之一 对象，因为选择的值比较了对象引用的基数

ngOnInit(){
this.field.value = this.field.values[2];
}

stackblitz demo

select 元素的双向绑定无法正常工作 | Angular 11

Two-way binding for select element doesn't work properly | Angular 11

angular2-ngmodel

angular

two-way-binding