mat-option 需要 2 个点击事件来加载异步数据答案

【问题标题】：mat-option needs 2 click events to load asynchronous datamat-option 需要 2 个点击事件来加载异步数据
【发布时间】：2018-08-13 06:31:36
【问题描述】：

我是 Angular 的新手。我无法理解 mat-select 和 mat-option 元素的功能。

我希望我的 mat-select 仅在单击时获取数据。但是现在我必须单击两次才能使列表出现，我真的不明白为什么。如果有人有任何想法，我将不胜感激。

我的 HTML：

<mat-select placeholder="Aircraft Family" [(ngModel)]="aircraftFamily" (click)="loadFamilies()">
    <mat-option *ngFor="let myAircraftFamily of aircraftFamilies" [value]="myAircraftFamily.name">{{myAircraftFamily.name}}</mat-option>
</mat-select>

我的模块：

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})

export class HeaderComponent implements OnInit {

   aircraftFamily: string = '';
   aircraftFamilies = [];

   constructor(private route: ActivatedRoute, private headerService: HeaderService) {
       this.route.paramMap.subscribe(
           (params: ParamMap) => {
               if (params.has('family')) {
                   this.aircraftFamily = params.get('family');
               }
           }
       );
   }

   ngOnInit() {
   }

   loadFamilies() {
       this.headerService.getAircraftFamilies().then((result) => {
           this.aircraftFamilies = result; // [{id:xxx, name:aircraftX},..]
       }, (error: HttpErrorResponse) => {
           console.log('error: ' + error)
       });
   }
}

【问题讨论】：

重复：stackoverflow.com/questions/47020988/…

标签： typescript angular-material angular5 ngfor

【解决方案1】：

我认为问题在于，在异步方法可以将选项加载到 dom 之前，打开选择的 click 事件被触发。所以选择不会打开，因为它没有选项。

我解决这个问题的方法是在我的选项列表中没有选项时显示的选择中添加一个禁用的选项。此选项包含一个跨度和一个微调器以指示它正在加载。

Here is a stackblitz example demonstrating this.

注意：在我的示例中，服务可以根据情况返回不同的数据。因此，每次打开列表时，我都必须将选项列表设置回空并清除 formControl 的值。如果您只需要加载一次选项，那么您将不得不稍微修改代码以阻止每次用户打开选择时重新加载选项。

【讨论】：