Angular 6 无法从提供的对象中自动选择/绑定下拉列表值 [英] Angular 6 cannot automatically select/bind dropdown list value from supplied object
问题描述
我从服务中获取一个国家/地区对象并将其绑定到一个包含国家/地区下拉列表的表单.从服务中检索该国家/地区后,该国家/地区并未显示为选中状态,但所有其他数据均显示正常,包括绑定到下拉列表的字符串性别字段.不过,我可以从列表中手动选择国家/地区.如何自动显示所选国家/地区?
I get a country object from a service and bind it to a form that has a dropdown list of countries. The country doesn't appear selected after retrieving it from the service but all the other data is shown OK including a string gender field which is bound to a dropdown list. I can manually select the country from the list though. How can I automatically show the country as selected?
personal-details.component.html
personal-details.component.html
<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>
personal-details.component.ts
personal-details.component.ts
countries = [
new Country('1100', 'Australia', '1'),
new Country('1201', 'New Zealand', '160'),
new Country('3105', 'Malta', '140')
];
genders = ['F', 'M'];
ngOnInit() {
this.form = this.fb.group({
givenName: ['', Validators.required],
surname: ['', Validators.required],
gender: ['', Validators.required],
countryBorn: ''
});
this.response = this.applicantService.getDetails()
.pipe(take(1), tap(resp => {
this.form.patchValue(resp.personalDetails);
}));
}
域:
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;
}
}
数据:
incoming value from service: { "surname": "Oliver", "givenName": "Bert", "gender": "M", "countryBorn": { "id": "1201", "name": "New Zealand", "displayOrder": "160" }, "birthdate": "1990-04-21" }
Form value on load ({{form.value | json }}) = { "givenName": "Bert", "surname": "Oliver", "gender": "M", "countryBorn": { "id": "1201", "name": "New Zealand", "displayOrder": "160" }
谢谢
推荐答案
Angular 使用对象标识来选择选项,并且还提供了特殊的输入属性来自定义默认的选项比较算法:compareWith:
Angular uses object identity to select option and also provides special input property to customize the default option comparison algorithm: compareWith:
html
<mat-select ... formControlName="countryBorn" [compareWith]="compareFn">
^^^^^^^^^^^^^^^^^^^^^^^^^
ts
compareFn(c1: Country, c2: Country) {
return c1.id === c2.id;
}
这篇关于Angular 6 无法从提供的对象中自动选择/绑定下拉列表值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!