显示和隐藏 dropdownList 的容器 Angular 9

Question

我有三个下拉列表和三个组件来呈现结果。这工作正常，但一旦选择了一个，另一个仍然存在。我已经搜索过答案，ngIf 是最好的答案吗？如果是这样，我该如何实现这些布尔标志？

html

<div class="container-fluid">
  <div class="row">

    <div class="col-md-6 offset-md-3">

      <mat-form-field style="width:100%;">
        <mat-label>Choose a Category</mat-label>
        <mat-select [(value)]="category" (selectionChange)="searchByCategory() ">
          <mat-option *ngFor="let n of nobelCategory" [value]="n.name">
            {{n.name}}
          </mat-option>

        </mat-select>


      </mat-form-field>
    </div>
    <div class="col-md-6 offset-md-3">
      <mat-form-field style="width:100%;">
        <mat-label>Choose a Country</mat-label>
        <mat-select [(value)]="country" (selectionChange)="searchByCountry() ">
          <mat-option *ngFor="let c of countries" [value]="c.name">
            {{c.name}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

    <div class="col-md-6 offset-md-3">
      <mat-form-field style="width:100%;">
        <mat-label>Choose a year</mat-label>
        <mat-select [(value)]="year" (selectionChange)="searchByYear() ">
          <mat-option *ngFor="let year of numbers" [value]="year">
            {{year}}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>



    <!-- CARDS RESULT-->

    <app-card-winners  [nobelWinner]="nobelWinner"></app-card-winners>
    <app-selection [countryWinner]="countryWinner"></app-selection>
    <app-winners-by-year [years]="years"> </app-winners-by-year>

    <!-- CARDS RESULT END-->

  </div>
</div>

TS:

       searchByCategory() {
                   console.log(this.category)
                    this.dataService.searchByCategory(this.category)

                    .subscribe(data => {
                     this.nobelWinner = data
                       console.log(data)
        this.isType='nobel';

      })
  }

我得到的错误是：Bindings cannot contaiagn assifments at column 8 [isType='nobel

Answer 1

是的，您可以在这种情况下使用 ngIf

<app-card-winners *ngIf="isType== 'nobel'"  [nobelWinner]="nobelWinner"></app-card-winners>
<app-selection *ngIf="isType== 'winner'"  [countryWinner]="countryWinner"></app-selection>
<app-winners-by-year *ngIf="isType== 'years'" [years]="years"> </app-winners-by-year>

在组件中创建变量，如 isType="";

然后在更改事件函数中更改它 searchByCountry(),searchByYear() ,searchByCategory().

例如，

searchByCategory(){
   //your conditions...
   this.isType='nobel';
}

Answer 2

@pc_coder 解决方案是正确的，但它有一个错误：它将是：

<app-card-winners *ngIf="isType==='nobel'"  [nobelWinner]="nobelWinner"></app-card-winners>
<app-selection *ngIf="isType==='winner'"  [countryWinner]="countryWinner"></app-selection>
<app-winners-by-year *ngIf==="isType='years'" [years]="years"> </app-winners-by-year>

=== 运算符计算字符串的内容...

显示和隐藏 dropdownList 的容器 Angular 9

Show and Hide container of dropdownList Angular 9

angular

dropdown

angular-ng-if