Как получить угловой предмет из $ event?

Question

отображаю на странице массив массивов объектов. И у каждого объекта есть событие клика. Я хочу заменить столько кликов (сейчас это более трех тысяч кликов) одним кликом на обертку. Например, текущий код

<div *ngFor="var service of services">
  <div *ngFor="var cat of service.cats">
    <div (click)="catClick(cat)">{{cat.name}}</div>
    <div (click)="increaseQuantity(cat)">+</div>
    <div (click)="decreaseQuantity(cat)">-</div>
  </div>
</div>

Желаемый код

<div (click)="someCommonFunc($event)">
  <div *ngFor="var service of services">
    <div *ngFor="var cat of service.cats">
      <div>{{cat.name}}</div>
      <div>+</div>
      <div>-</div>
    </div>
  </div>
</div>

Но в event.target я получаю только HTML-код элемента. Как я могу получить угловой объект, который был связан с этим html-элементом?

Answer 1

Для достижения ожидаемого результата используйте нижеприведенную опцию использования имени класса и события

1. Передайте событие $ и объект cat в событие щелчка во втором цикле
2. Используя event.target.className, обновите объект cat

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  displayCat = "";
  services = [
    {
      cats: [{ name: "1aaa1", quantity: 10 }, { name: "1aaa2", quantity: 10 }]
    },
    {
      cats: [{ name: "2aaa1", quantity: 20 }, { name: "2aaa2", quantity: 20 }]
    }
  ];
  

  test(event, cat) {
    if (event.target.className === "increase") {
      cat.quantity++;
    }

    if (event.target.className === "decrease") {
      cat.quantity--;
    }

    if (event.target.className === "cat") {
      this.displayCat = cat.name;
    }
  }
}

<div *ngFor="let service of services">
  <div
    *ngFor="let cat of service.cats"
    class="main"
    (click)="test($event, cat)"
  >
    <div class="cat">{{cat.name}}</div>
    <div>{{cat.quantity}}</div>
    <div class="increase">+</div>
    <div class="decrease">-</div>
  </div>
</div>

Display Cat Name:
<div>{{displayCat}}</div>

коды и коробка - https://codesandbox.io/s/20zzjqzm3n

Answer 2

Вы можете поместить некоторые атрибуты HTML в элементы. В шаблоне

<div (click)="onClick($event)">
  <button *ngFor="let btn of buttons; let i = index"
     [attr.data-name]="btn" [attr.data-index]="i">
     {{btn}}
  </button>
</div>

и в ТС

  onClick(event) {
    console.log(event.target.dataset.name, event.target.dataset.index);
  }

https://stackblitz.com/edit/angular-plfldc