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

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

您可以添加!(returnQrCodes$ | async)作为显示条件，即

<div  class="search-select searchoptions" *ngIf="selectedSearch && hasOtherOptions(selectedSearch) && !(returnQrCodes$ | async)">
        <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>

Answer 2

您可以设置boolean以显示/隐藏下拉菜单。

showDropdown:boolean = false

 searchFor() {
    this.showDropdown = false;

    if (this.selectedSearch === 'Registratie') {
      this.filerByRegistration();
    }
    ...
 }

filerByRegistration(){
  ...
  this.showDropdown = true;
}

模板：

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