Select Angular 6无法自动从提供的对象中选择/绑定下拉列表值
我从服务中获取一个国家对象,并将其绑定到一个具有国家下拉列表的表单。从服务中检索国家/地区后,该国家/地区不会显示为选中状态,但所有其他数据都显示为OK,包括绑定到下拉列表的字符串性别字段。但我可以从列表中手动选择国家/地区。如何自动显示所选国家/地区 personal-details.component.htmlSelect Angular 6无法自动从提供的对象中选择/绑定下拉列表值,select,dropdown,angular6,Select,Dropdown,Angular6,我从服务中获取一个国家对象,并将其绑定到一个具有国家下拉列表的表单。从服务中检索国家/地区后,该国家/地区不会显示为选中状态,但所有其他数据都显示为OK,包括绑定到下拉列表的字符串性别字段。但我可以从列表中手动选择国家/地区。如何自动显示所选国家/地区 personal-details.component.html <form [formGroup]="form" (submit)="doSave(form.values)"> <mat-card cla
<form [formGroup]="form" (submit)="doSave(form.values)">
<mat-card class="main-card">
<mat-card-content>
<p>Personal Details</p>
<mat-form-field class="full-width-input">
<input matInput placeholder="Given name" formControlName="givenName" >
</mat-form-field>
<mat-form-field class="full-width-input">
<input matInput placeholder="Surname" formControlName="surname" required>
</mat-form-field>
<mat-form-field class="full-width-input">
<mat-select placeholder="Select gender" formControlName="gender" required>
<mat-option *ngFor="let g of genders" [value]="g">{{g}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="full-width-input">
<mat-select placeholder="Select country of birth" formControlName="countryBorn" required>
<mat-option *ngFor="let country of countries" [value]="country">{{country.name}}</mat-option>
</mat-select>
</mat-form-field>
</mat-card-content>
</mat-card>
</form>
域:
export class PersonalDetails {
givenName: string;
surname: string;
gender: string;
countryBorn: Country;
constructor(givenName?: string, surname?: string, gender?: string, countryBorn?: string) {
this.id = id;
this.surname = surname;
this.gender = gender;
this.countryBorn = countryBorn;
}
}
export class Country {
id: string;
name: string;
displayOrder: string;
constructor(id?: string, name?: string, displayOrder?: string) {
this.id = id;
this.name = name;
this.displayOrder = displayOrder;
}
}
数据:
感谢Angular使用对象标识选择选项,并提供特殊的输入属性来自定义默认选项比较算法: html 将resp.personalDetails.countryBorn设置为列表中的实际对象,然后再将其分配给窗体,因为对象比较{…}==={…}始终为false,Angular将无法在其上匹配和选择
resp.personalDetails.countryBorn = this.countries.find(country=> resp.personalDetails.countryBorn.id);
或者将id单独设置为值
<mat-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mat-option>
或者,您可能需要使用compareWith定义自己的比较函数:每隔一天就会问一次这个问题。个人中的国家/地区对象,即使其属性与国家/地区数组中的一个国家/地区相同,也不会===到其中任何一个国家/地区。这是必须的。查找与人员中的国家/地区具有相同ID的阵列国家/地区,并将人员的国家/地区替换为阵列中的该国家/地区。或者只使用国家ID作为您选择的值。太棒了!在这上面花了这么多时间,多亏了你,它才起作用。干杯
<mat-select ... formControlName="countryBorn" [compareWith]="compareFn">
^^^^^^^^^^^^^^^^^^^^^^^^^
compareFn(c1: Country, c2: Country) {
return c1.id === c2.id;
}
resp.personalDetails.countryBorn = this.countries.find(country=> resp.personalDetails.countryBorn.id);
<mat-option *ngFor="let country of countries" [value]="country.id">{{country.name}}</mat-option>
{ "surname": "Oliver", "givenName": "Bert", "gender": "M", "countryBorn": "1201", "name": "New Zealand", "displayOrder": "160" }, "birthdate": "1990-04-21" }