Angular 8中基于选中项切换Material下拉列表的显示/隐藏

嘿，这个需求很好实现，咱们只需要根据selectedSearch的选中值，分别控制两个下拉列表的*ngIf条件就能达成互显互藏的效果！下面是具体的修改方案：

1. 调整预填充数据下拉的显示规则 #

这个下拉需要在**选中项不是'QrCode'**的时候才显示，同时保留你原本的hasOtherOptions判断（确保有可展示的选项）：

<div class="search-select searchoptions" *ngIf="selectedSearch && selectedSearch !== 'QrCode' && hasOtherOptions(selectedSearch)">
  <mat-select placeholder="Opties" name="option" [(ngModel)] = "selectedValue" >
    <mat-option *ngFor="let option of getOtherOptions(selectedSearch)" [value]="option.apiStatus" > {{ option.status }} </mat-option>
  </mat-select>
</div>

2. 调整服务器数据下拉的显示规则 #

这个下拉只需要在**选中项是'QrCode'**的时候显示，同样保留hasOtherOptions判断：

<div class="search-select searchoptions" *ngIf="selectedSearch === 'QrCode' && hasOtherOptions(selectedSearch)">
  <mat-select placeholder="Opties" name="option" [(ngModel)] = "selectedValueOptie" (click)="getQrCodes()" >
    <mat-option *ngFor="let option of returnQrCodes$ | async" [value]="option.value" > {{ option.qrCode }} </mat-option>
  </mat-select>
</div>

小提示：我帮你修正了mat-option里的value绑定写法，原来的value="option.value"是字符串字面量，改成[value]="option.value"才能正确绑定到变量上哦！

3. 优化数据加载体验（可选） #

现在你的getQrCodes()是点击下拉时才触发数据加载，如果你想让体验更流畅，可以在选中'QrCode'时自动加载数据，只需要在searchFor()的对应分支里调用这个方法：

searchFor() {
  if (this.selectedSearch === 'Registratie') { this.filerByRegistration(); }
  if (this.selectedSearch === 'Chat') { this.filterByChat(); }
  if (this.selectedSearch === 'Inlog') { this.filterByInlog(); }
  if (this.selectedSearch === 'QrCode') { 
    this.filterByQrCodes();
    this.getQrCodes(); // 选中QrCode时自动触发数据加载
  }
  if (this.selectedSearch === 'Doelen') { this.filerByChallenge(); }
}

这样调整后，当你选中'QrCode'时，会自动显示服务器数据的下拉并加载数据；选中'Doelen'或其他选项时，就会切换显示预填充数据的下拉，完美实现你要的互斥隐藏需求啦！

内容的提问来源于stack exchange，提问作者mightycode Newton