Javascript 使用模型[角度]的嵌套对象填充选择下拉列表

我有一个选择下拉列表，需要预先填充对象数组。但是，ngModel不与数据绑定。我试图以更简单的方式演示它，但实际上，我有一个主页，当我从主页导航到联系人页面时，我需要填充表单数据。如果我直接进入联系人页面，表单必须为空

在下面的示例中，为了简化，我在页面加载时填充数据，但我面临的问题与前一个示例类似，select的ngModel不会使用JSON中的数据进行更新

组成部分：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
adViewList: AdViewModel = new AdViewModel();
callListType = [
   {
  callType: {
    'id': 1,
    'description': 'description1',
   }
},
{
  callType: {
    'id': 2,
    'description': 'description2',
  },
}

]
compareByOptionId(idFist, idSecond) {
return idFist && idSecond && idFist.callType.description ===    idSecond;
}
prepopulateData = {
inciNum: "12365",
callType: {
    'id': 2,
  'description': 'description2',      
  }
}

ngOnInit() { // on page load
const someDate:any = this.prepopulateData;
this.adViewList = someDate
}
}
export class AdViewModel {
inciNum: string;
callType = Availability;
}

export class Availability {
id: string;
description: string;
}

  compareByOptionId(idFist, idSecond) {
    return idFist.id === idSecond.id
  }

HTML:

{{data.callType.description}

---

我测试了以下内容，似乎效果不错。注意这个变化。我正在映射

[（ngModel）]=“adViewList.callType”

而不是

[（ngModel）]=“adViewList”

，因为，

callListType

是

callType

的列表，而不是

AdViewModel

另外请注意，我正在打印

列表：{{adViewList | json}

，以检查模型是否正在更新，以及它似乎正在从所选内容获取值

更新：要使默认值按照您拥有的onNgInit（）显示，您需要将

ngValue

更改为

[ngValue]=“data.callType”

，并且比较函数需要检查ID，而不是对象。请参阅下面的代码

试试这个： 在模板中：

<select name="select" [(ngModel)]="adViewList.callType"
                  [compareWith]="compareByOptionId">
                  <option style="display:none"></option>
                  <option *ngFor="let data of callListType" [ngValue]="data.callType">
                    {{data.callType.description}} </option>
</select>

PS：对不起，我没有stackblitz id来分享我测试的内容，我只是编辑了你的文件以进行测试。

你有两个问题：

ngValue

无效，请将其更改为

[value]

您的绑定错误，您需要将

[（ngModel）]=“someValue”

与

[value]=“someValue”

匹配，因为它是您的模型id

解决方案：将

[ngValue]=“data”

更改为

[value]=“data.callType.description”

，如下所示：

<select name="select" [(ngModel)]="adViewList.callType.description" [compareWith]="compareByOptionId">
  <option style="display:none"></option>
  <option *ngFor="let data of callListType" [value]="data.callType.description">
    {{data.callType.description}}
  </option>
</select>

{{data.callType.description}

注意：我建议您使用

id

属性，而不是

description

属性作为如下值：

<select name="select" [(ngModel)]="adViewList.callType.description" [compareWith]="compareByOptionId">
  <option style="display:none"></option>
  <option *ngFor="let data of callListType" [value]="data.callType.description">
    {{data.callType.description}}
  </option>
</select>

[（ngModel）]=“adViewList.callType.id”

---

[value]=“data.callType.id”

正如@Arragon所说，问题是您选择了一个类型为CallListType的对象来为模型赋值，当您在选项中使用[ngValue]时，您将为所有对象赋值。因此，您必须确保模型为adViewList.callType，并将比较函数也更改为adViewList.callType。我将ngModel值更改为adViewList.callType，现在它填充callListType中的第一项，而不考虑prepopulateData数组中存在的属性。您确定吗？我刚刚再次测试了这段代码，它似乎得到了基于选择的调用类型对象。显然，iciNum将保持不变，因为这不是CallType的一部分。您可以发布带有更改的stackblitz链接吗？我已经测试过了，它没有返回预期的数据。在ngOnInit中，我们将下拉列表的值指定给“description2”，但是，我看不到结果。adViewList数据如您所述打印正确，但是下拉列表没有填充该值。我做了上述更改，它默认为数组中的第一项，而不是预填充数据中的值。我想知道是否需要对其嵌套对象的AdminViewModel进行任何更改。