如何使用材料 angular 顯示/隱藏下拉列表

Question

所以我使用的是 angular 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>

我有一個 function 選擇了檢查選項：

 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();
    }
  }

當然，這必須重構。 但那是為了以后的情況。

So when the option QrCode is selected the With the selected data dropdownlist has to be hidden and also vice versa. So when the option Doelen will be selected the Dropdownlist with the data from the server has to be hidden.

但是如何歸檔呢？

謝謝你

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>