Условный класс в * NgFor с угловым - PullRequest
Новая
       5

Условный класс в * NgFor с угловым

0 голосов
/ 14 ноября 2018

У меня есть этот HTML-код: 

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas"
                class="chip"
                [ngClass]="{'chip-selecionado' : isClassVisible}"
                [selected]="idioma"
                (click)="isClassVisible = !isClassVisible;changeSelected('s', idioma)">
        {{ idioma.nome }}
      </mat-chip>
    </mat-chip-list>
  </div>

Когда я нажимаю на микросхему, класс меняется во всем, а не только в микросхеме, по которой щелкают. Я использую Angular 5.

Хотелось бы, чтобы щелкнувший элемент изменил css

Смотрите эту картинку до и после

до : enter image description here

после : enter image description here

Кто-то может помочь?

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Решение: -

Stackblitz Link: - https://stackblitz.com/edit/angular-material-jyzotv?file=app%2Fapp.component.html

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas;let isFirst = first"
                  [selected]="tab === idioma"
                  class="chip"
                 [class.active]="tab === idioma"
               (click)="activateClass(idioma)">
        {{ idioma }}
      </mat-chip>
    </mat-chip-list>
  </div>

  <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas;let isFirst = first"
                  class="chip"
                 [class.active]="tab === idioma"
               (click)="activateClass(idioma)">
        {{ idioma }}
      </mat-chip>
    </mat-chip-list>
  </div>

- 

export class AppComponent  {
  idiomas = ['A','B','C']
  tab = this.idiomas[0];

  activateClass(subModule){
  this.tab = subModule;    
}
}
0 голосов
/ 14 ноября 2018

Я бы посоветовал вам сохранить index в isClassVisible и переименовать его в что-то вроде visibleClassIndex и проверить в [ngClass], видим ли текущий класс, проверив текущий index с помощью visibleClassIndex, поскольку будет 0 индекс, который является false значением, я бы посоветовал вам определить visibleClassIndex тип как null | number или undefined | number и сделать проверку таким образом visibleClassIndex !== null && visibleClassIndex === i или visibleClassIndex !== undefined && visibleClassIndex === i, если вы выберете null убедитесь, что в качестве значения по умолчанию visibleClassIndex: null | number = null; назначено null, я бы предложил использовать undefined, потому что с ним вам не нужно определять тип по умолчанию, так как он автоматически будет undefined

 <div class="chip-idiomas">
    <mat-chip-list multiple [selectable]="true">
      <mat-chip *ngFor="let idioma of idiomas"
                class="chip"
                [ngClass]="{'chip-selecionado' : visibleClassIndex !== undefined && visibleClassIndex === i}"
                [selected]="idioma"
                (click)="visibleClassIndex = i;changeSelected('s', idioma)">
        {{ idioma.nome }}
      </mat-chip>
    </mat-chip-list>
  </div>
...