angular - Kartlegging av flere klikkhendelser til en enkelt metode

For øyeblikket står jeg overfor et problem når jeg kartlegger flere klikkhendelser til en enkelt metode. Min nåværende implementering er som følger og den fungerer bra, men jeg trenger en bedre måte å håndtere flere knapper ved hjelp av én metode. Kan noen hjelpe med dette, vær så snill.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-draggable',
  templateUrl: './draggable.component.html',
  styleUrls: ['./draggable.component.scss']
})
export class AppComponent implements OnInit {

  status1: boolean = false;
  status2: boolean = false;
  status3: boolean = false;
  status4: boolean = false;
  status5: boolean = false;
  status6: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  clickEvent1() {
    this.status1 = !this.status1;
  }
  clickEvent2() {
    this.status2 = !this.status2;
  }
  clickEvent3() {
    this.status3 = !this.status3;
  }
  clickEvent4() {
    this.status4 = !this.status4;
  }
  clickEvent5() {
    this.status5 = !this.status5;
  }
  clickEvent6() {
    this.status6 = !this.status6;
  }
}

Trenger å redusere antall metode- og variabeldefinisjoner i ts-filen og også i malfilen. div-tagger kan også legges til dynamisk opp til maks 10 div...

app.component.html

  <div class="container-fluid">
      <div class="row grid">
          <div class="col-md-4 my-3 grid__widget-holder"
               (click)="clickEvent1()"  
               [ngClass]="status1 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
              <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 1
                            <button class="float-right" type="button">
                                    <i class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent2()"  
          [ngClass]="status2 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 2
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                            </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent3()"  
          [ngClass]="status3 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 3
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent4()"  
          [ngClass]="status4 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 4
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>
              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent5()"  
          [ngClass]="status5 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
         <div class="card widget">
                  <div class="card-header widget__header">
                      <h5 class="card-title">Widget 5
                            <button class="float-right" type="button">
                                    <i  class="fa fa-bandcamp">
                                    </i>
                                </button>
                      </h5>
                  </div>
                  <div class="card-body widget__body">
                      Content
                  </div>
                  <div class="card-footer widget__footer">
                      Footer
                  </div>

              </div>
          </div>
          <div class="col-md-4 my-3 grid__widget-holder"
          (click)="clickEvent6()"  
          [ngClass]="status6 ? 'col-md-8 my-3 grid__widget-holder' : 'col-md-4 my-3 grid__widget-holder'">
          <div class="card widget">
                      <div class="card-header widget__header">
                          <h5 class="card-title">Widget 6
                          <button class="float-right" type="button">
                              <i  class="fa fa-bandcamp">
                              </i>
                          </button>
                        </h5>
                      </div>
                      <div class="card-body widget__body">
                          Content
                      </div>
                      <div class="card-footer widget__footer">
                          Footer
                      </div>
                  </div>
              </div>
      </div>
  </div>

Svar #1

Det er to mulige måter ifølge meg

først: du kan direkte endre verdien i html ved å kalle på den nødvendige variabelen ved klikkhendelsen f.eks:-

(click)="this.status1 = !this.status1"

andre: hvis du vil lage en funksjon i ts, gjør det slik f.eks:-

clickEvent(status): boolean {
    return !status;
  }

og du kan bruke denne funksjonen din i ts som i html:-

(click)="status1 = clickEvent(status1)"
(click)="status2 = clickEvent(status2)"

Svar #2

Er knappene vippebrytere? Jeg spør fordi implementeringen er slik.

Du kan bruke eval :

clickEvent(id) {
eval(`this.status${id} = !this.status${id};`)
}

PS: Legg merke til at uttrykket i eval er sitert inne i |``| og ikke vanlig |''|.