Angular 如何从远程API服务填充材料选择下拉列表？

我试图用远程API服务的值填充material select下拉列表。我在组件上不断得到一个null或未定义的值

这适用于使用平均堆栈和角度材质的角度7。我尝试过用函数比较并记录值。我注意到组件总是首先加载其值（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;
}

{{lC.name}
恩戈尼尼特（）{
this.authStatusSub=this.authService
.getAuthStatusListener（）
.subscribe（authStatus=>{
this.isLoading=false；
});
this.form=new FormGroup({
id:new FormControl（空），
公司：新FormControl（此.LoadedCompanys）
});
this.companyService.getCompanyList（）；
this.companySub=this.companyService
.getcompanyUpdateListener（）
.订阅（（公司数据：{公司：公司[]}）=>{
this.isLoading=false；
this.loadedCompanies=companyData.companys；
});
}
compareFn（c1:公司，c2:公司）：布尔值{
返回c1&&c2？c1.id==c2.id:c1==c2；
}

---

我希望在加载组件之前从可观察对象加载值并填充选择输入。

您可以向父容器添加一个

*ngIf

，以便在订阅可观察对象并分配

LoadedCompanys

之前不会加载mat select组件

 <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>

这就是您应该如何填充

LoadedCompanys

数组的方法

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

loadedCompanies: Company[];

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

---

等一下。。

this.companyService.getCompanyList（）

应该是填充

this.loadedCompanies

的API调用吗？注释不用于扩展讨论；这段对话已经结束。谢谢！正如你所说的那样。必须删除companyUpdateListener，并从服务中删除subscribe方法。