javascript - 使用模型 [Angular] 的嵌套对象填充选择下拉列表

Question

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

在下面的示例中，为了使其更简单，我在页面加载时填充数据，但我面临的问题与我之前的示例类似，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;
}

HTML:

<input type="text" id="inputcomplaint" aria-describedby="complaintHelp" 
autocomplete="new-password" name="complaint" 
[(ngModel)]="adViewList.inciNum" #complaint="ngModel">

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

Demo

Answer 1

我测试了以下内容，它似乎有效。注意变化。我正在映射 [(ngModel)]="adViewList.callType"而不是 [(ngModel)]="adViewList"因为，callListType是 callType 的列表不是AdViewModel

另请注意，我正在打印 <p> List: {{adViewList | json}} </p>检查模型是否正在更新，它似乎正在从所选内容中获取值。

更新:要让默认值按照您拥有的 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>

在组件中:

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

PS:抱歉，我没有 stackblitz id 来分享我测试过的东西，我只是编辑了你的文件来测试。