如何从远程 API 服务填充 Material select 下拉列表？

Question

我正在尝试使用来自远程 API 服务的值填充 material select 下拉列表。我一直在组件中收到 null 或 undefined 值。

这是针对 Angular 7 使用 MEAN 堆栈和 Angular Material。我试过 compareWith 函数并记录值。我注意到该组件总是首先加载它的值为 null，然后是具有值的 API 服务。

<mat-form-field>
    <mat-select formControlName="company"  placeholder="Select 
Company" [(value)]="selectedCompany" [compareWith]="compareFn">
        <mat-option *ngFor="let lC of loadedCompanies" 
 [value]="lC.id">
          {{lC.name}}
        </mat-option>
    </mat-select>
</mat-form-field>

ngOnInit() {
  this.authStatusSub = this.authService
  .getAuthStatusListener()
  .subscribe(authStatus => {
      this.isLoading = false;
  });

  this.form = new FormGroup({
      id: new FormControl(null),
      company: new FormControl(this.loadedCompanies)
  });

  this.companyService.getCompanyList();
  this.companySub = this.companyService
  .getcompanyUpdateListener()
  .subscribe((companyData: {companies: Company[]}) => {
    this.isLoading = false;
    this.loadedCompanies =  companyData.companies;
  });
}

compareFn(c1: Company, c2: Company): boolean {
  return c1 && c2 ? c1.id === c2.id : c1 === c2;
}

我希望在加载组件之前从 observable 加载值并填充 select 输入。

Answer 1

您可以添加一个 *ngIf 到父容器，这样 mat-select 组件将不会被加载，直到 observable 被订阅并且 loadedCompanies 被分配。

 <mat-form-field *ngIf = "loadedCompanies">
   <mat-select formControlName="company"  placeholder="Select 
Company" [(value)]="selectedCompany" [compareWith]="compareFn">
     <mat-option *ngFor="let lC of loadedCompanies" 
 [value]="lC.id">
       {{lC.name}}
     </mat-option>
  </mat-select>
</mat-form-field>

应将 FormControl 公司的初始值设置为 null，而不是整个 loadedCompanies 数组。

this.form = new FormGroup({
  id: new FormControl(null),
  company: new FormControl(null)
});

这是填充 loadedCompanies 数组的方式。

loadedCompanies: Company[];

ngOnInit() {
  .
  .
  // other lines of code before this
  this.companyService.getCompanyList().subscribe(companyData => {
    this.loadedCompanies = companyData.companies;
  });
}

如何从远程 API 服务填充 Material select 下拉列表？

How to populate Material select dropdown from remote API service?

angular

angular-material

angular7

mean-stack