选择元素的双向绑定无法正常工作 |角 11答案

【问题标题】：Two-way binding for select element doesn't work properly | Angular 11选择元素的双向绑定无法正常工作 |角 11
【发布时间】：2020-12-22 11:33:07
【问题描述】：

我有一个带有结构的 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"
                }
            }
        ]           
    },

对于它的选择器

"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"
      }
    ]
}

所以，我尝试制作一个简单的选择器，我可以在其中看到当前的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>

当我制作这个选择器时，我遇到了问题：当页面加载时，选择器是空的（看起来，当前值不会通过[(ngModel)] 绑定到选择元素）

但是当我开始从选择下拉列表中选择值时，选择的值绑定到项目没有问题。

当页面加载时，我需要做什么才能将 CURRENT 值绑定到选择器？

【问题讨论】：

你没有设置任何初始值 list_field.value is undefined
初始值为 init。您可以在屏幕截图和 JSON 示例中看到初始值：{"pk": 567,"value": "Finished","position": 3,"color": "FF0000"}
看起来像一个问题，因为我试图在选择器内操作整个对象，但不是在其中使用唯一值（如pk）。当我尝试在选择器和ngModel 中使用value.pk 操作时 - 一切正常。但我需要对整个对象进行操作...
如果你使用 ngValue 选择的值必须基于相同的对象引用

标签： angular two-way-binding angular2-ngmodel

【解决方案1】：

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

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

stackblitz demo ?

【讨论】：

是的，为了提问 - 它的工作，谢谢。但模型过于灵活，无法在 init 上执行此类任务：可能存在很多字段。所以，我的解决方案是在选择器内部使用value.pk，使用(change) 检测选择器更改并更改整个对象，使用value.pk 在this.field.values 中找到该对象