Angular дает активный класс карты при нажатии и удаляет активный класс при нажатии другой карты

У меня возникли проблемы с выяснением того, как присвоить карте класс активной при нажатии на нее, а также удалить ее при нажатии на другую карту. Я нашел несколько сообщений о том, как добавить активный класс, но не о том, как его удалить при нажатии на другую карту. Как я мог этого добиться? Код, с которым я работаю, выглядит так:

HTML:

 <div class="add-experience-form">

                    <mat-card *ngFor="let skillExp of skillExpArr">

                        <img src={{skillExp.imgPath}}>
                        <mat-card-title>{{skillExp.level}}</mat-card-title>
                        <mat-card-content>" {{skillExp.title}} "</mat-card-content>

                        <div *ngIf="!skillExp.slider ;else slider">
                            <mat-radio-group aria-label="Select an option">
                                <mat-radio-button value="1">I followed a workshop / <br>
                                    played around with it</mat-radio-button>
                                <mat-radio-button value="5">Played with it for a week ,<br>
                                    I know the basics</mat-radio-button>
                                <mat-radio-button value="10">Two weeks of experience </mat-radio-button>
                                <mat-radio-button value="20">I have my first solid <br>
                                    month of experience</mat-radio-button>
                            </mat-radio-group>
                        </div>

                        <ng-template #slider>
                            <p>{{skillExp.min}}</p>
                            <mat-slider [max]="skillExp.max" [min]="skillExp.min" [step]="skillExp.step" [thumbLabel]="true" [(ngModel)]="skillExp.value"></mat-slider>
                            <p>{{skillExp.max}}</p>
                            <div *ngIf="skillExp.value != 0"><p><span>{{skillExp.value}}</span> {{skillExp.sliderDescription}} experience</p></div>
                          </ng-template>

                    </mat-card>

      </div>

Типографический текст:

export class SkillExperienceComponent implements OnInit {
  constructor(private route: ActivatedRoute, private router: Router) {}
  private sub: any;
  consultantId: number;
  skillname: string;
  skillExpArr: Array<any> = [
    {
      id: 1,
      level: 'Rookie',
      title: " I'm soooo new to this ",
      value: 0,
      imgPath: '../../../../../assets/JPG/rookie-exp.jpg',
      enabled: false,
      slider: false,
    },
    {
      id: 2,
      level: 'Junior',
      title: ' I have the basics down ',
      value: 0,
      imgPath: '../../../../../assets/JPG/junior-exp.jpg',
      enabled: false,
      slider: true,
      min: 2,
      max: 12,
      step: 1,
      sliderDescription: 'months',
    },
    {
      id: 3,
      level: 'Medior',
      title: " I'm a solid performer ",
      value: 0,
      imgPath: '../../../../../assets/JPG/medior-exp.jpg',
      enabled: false,
      slider: true,
      min: 1.5,
      max: 3.5,
      step: 0.5,
      sliderDescription: 'years',
    },
    {
      id: 4,
      level: 'Senior',
      title: " I'm mastering this.. ",
      value: 0,
      imgPath: '../../../../../assets/JPG/senior-exp.jpg',
      enabled: false,
      slider: true,
      min: 4,
      max: 10,
      step: 1,
      sliderDescription: 'years',
    },
  ];

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      this.consultantId = Number(params['id']);
      this.skillname = params['skillname'];
    });
  }

  navigateAddSkill() {
    this.router.navigate([`skillplatform/${this.consultantId}/add`]);
  }

angular class click jquery selected
person imkeVr    schedule 24.03.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать index, чтобы сделать что-то подобное

HTML:

<mat-card
  *ngFor="let skillExp of skillExpArr; let i = index;"
  [class.active]="selectedIndex === i"
  (click)="selectedIndex = i">
  ...
</mat-card>

ts:

export class SkillExperienceComponent implements OnInit {
selectedIndex = 0;

Я использовал индекс в качестве указателя, но вы также можете использовать поле в объекте skillExp.

person eko    schedule 24.03.2020
comment
Я действительно все обдумывал! Я думал, что это будет что-то сложное, но теперь все это имеет смысл! Спасибо за ваш ответ. - person imkeVr; 24.03.2020
comment
В итоге я использовал идентификатор каждого объекта вместо индекса, потому что он у меня уже был на месте. Еще раз спасибо, не могу поверить, что сам об этом не подумал. - person imkeVr; 24.03.2020
comment
@imkeVr Использование id, конечно, лучше, хорошая мысль! Еще одна хорошая вещь, о которой следует помнить, это то, что вы также можете использовать trackBy с id для повышения производительности внутри ngFor, если это необходимо. - person eko; 24.03.2020
comment
Я раньше не пользовался trackBy, так что посмотрю, спасибо за совет! - person imkeVr; 24.03.2020