Как заполнить раскрывающийся список выбора материала из удаленного API - PullRequest
Новая
       14

Как заполнить раскрывающийся список выбора материала из удаленного API

1 голос
/ 04 апреля 2019

Я пытаюсь заполнить раскрывающийся список выбора материала значениями из удаленной службы API.Я продолжаю получать нулевое или неопределенное значение в компоненте.

Это для Angular 7, использующего стек MEAN и Angular Material.Я пробовал сравнить с функцией и записи значений.Я заметил, что компонент всегда сначала загружает свое значение, которое является нулевым, а затем сервис 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;
}

Я ожидаю, что значения будут загружены из наблюдаемой и заполнены выбранным входом перед загрузкой компонента.

1 Ответ

2 голосов
/ 04 апреля 2019

Вы можете добавить *ngIf в родительский контейнер так, чтобы компонент mat-select не загружался до тех пор, пока не будет подписано наблюдаемое и не будет назначено 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;
  });
}
...