Показать и скрыть контейнер раскрывающегося списка Angular 9 - PullRequest
Новая
       75

Показать и скрыть контейнер раскрывающегося списка Angular 9

0 голосов
/ 10 июля 2020

У меня есть три раскрывающихся списка и три компонента для визуализации результатов. Это работает нормально, но как только один выбран, другой остается. Я искал ответы, и это лучший ответ 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

Ответы [ 2 ]

2 голосов
/ 10 июля 2020

Да, вы можете использовать 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';
}
0 голосов
/ 10 июля 2020

Решение @ 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>

Оператор === оценивает содержимое строки ...

...