Angular 在单击时使卡片类处于活动状态，并在单击其他卡片时删除活动类

Question

我无法弄清楚如何在单击卡片时为其赋予活动类别，并在单击另一张卡片时将其删除。我发现了一些关于如何添加活动类的帖子，但没有找到如何在单击另一张卡片时将其删除。我怎么能做到这一点？我正在使用的代码如下所示：

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

Answer 1

您可以利用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 对象上的字段。