Question

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

在下面的示例中，为了简化起见，我在页面加载时填充了数据，但是我面临的问题与我以前的示例相似，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"，并且compare函数需要检查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：对不起，我没有一个共享的ID，可以共享测试的内容，我只是编辑了要测试的文件。

Answer 2

您有2个问题：

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>

注意：：建议您使用id属性而不是description属性作为这样的值：

[(ngModel)]="adViewList.callType.id"

[value]="data.callType.id"

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

2 个答案: