如何使用材质角度显示/隐藏下拉列表

Question

所以我使用的是角度8。我有两个下拉列表。其中已经填充了数据。一个包含来自服务器的数据。但是现在，如果下拉列表显示来自服务器的选定数据，我想隐藏已填充数据的那个。

使用所选数据

<div  class="search-select searchoptions" *ngIf="selectedSearch && 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>

使用来自服务器的填充数据：

<div   class="search-select searchoptions" *ngIf="selectedSearch && 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>

并且我有一个功能，可以选择选项：

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();
}
if (this.selectedSearch === 'Doelen') {
this.filerByChallenge();
}
}

当然，这必须重构。但那是以后的情况。

因此，当选择选项 QrCode 必须隐藏所选数据下拉列表，反之亦然。因此，当选择选项Doelen时，必须隐藏包含服务器数据的下拉列表。

但是如何拱起呢？

谢谢

Answer 1

您可以设置一个boolean来显示/隐藏下拉列表。

showDropdown:boolean = false

searchFor() {
this.showDropdown = false;
if (this.selectedSearch === 'Registratie') {
this.filerByRegistration();
}
...
}
filerByRegistration(){
...
// after data is fetched
this.showDropdown = true;
}

模板：

<div class="search-select searchoptions" *ngIf="showDropdown && selectedSearch && hasOtherOptions(selectedSearch)">
<mat-select placeholder="Opties" name="option" [(ngModel)] = "selectedValueOptie" 
...
</mat-select>
</div>