Angular активировать класс карты при нажатии и удалить активный класс при нажатии другой карты - PullRequest
Новая
       30

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

1 голос
/ 24 марта 2020

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

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`]);
  }

1 Ответ

1 голос
/ 24 марта 2020

Вы можете использовать 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.

...