Question

在Angular 2中，P下拉列表与从Web API调用填充的对象映射。在API调用之后，ngModel设置为下拉列表中存在的某个值。但是，仍然没有值显示为默认值，并且仍显示占位符值。

HTML

<div *ngIf="dropdownDataLoaded" style="display: inline-block">
                        <span class="dropdown" style="margin-left: 126px;">
                            <p-dropdown [options]="countryOptions" placeholder="Select" [(ngModel)]="selectedCountryValue" inputStyleClass="dropdown" optionLabel="name" (onChange)="onCountryChange($event)"></p-dropdown>
                        </span>
                    </div>

组件：

this.dropdownDataLoaded = false;

setTimeout(() => {
    this.databaseService.getCountryList().subscribe((countryList: IDropdownElement[]) => {
       this.countryOptions = countryList;
       this.dropdownDataLoaded = true;
       this.selectedCountryValue = {
        "name": "USA"
       };
      }

IDropdownElement模型：

export interface IDropdownElement {
  name: string;
  id: string;
  type: string;
  code: string;
}

此外，在下面的链接中提及，但没有运气。

How to set default value for PrimeNG p-dropdown

Answer 1

ngModel通过引用而不是值进行绑定。

因此，您需要使其指向列表中相同的对象。

更改此：

this.selectedCountryValue = {
        "name": "USA"
       };

对此：

this.selectedCountryValue = this.countryOptions.find(country => country.name === 'USA');

或使用compareWith伪指令，在此处了解更多信息：https://angular.io/api/forms/SelectControlValueAccessor

角度2：从API提供的选项中选择p下拉默认值

1 个答案: