如何从 $event 获取角度项目？答案

【问题标题】：How to get angular item from $event?如何从 $event 获取角度项目？
【发布时间】：2019-04-19 19:43:23
【问题描述】：

我在页面上显示一组对象数组。每个对象都有一个点击事件。我想通过单击包装器来替换那么多点击事件（现在已经超过三千个点击事件）。比如当前代码

<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 元素上的 angular 对象？

【问题讨论】：

为什么？您要解决的具体问题是什么？
我想减少听众数量
好的，但是为什么呢？你面对这些听众的问题是什么？您是否已证明这些点击侦听器会导致严重的性能问题，从而证明您尝试以不明显、复杂的方式做事是合理的？
我看到的问题不是您有 3000 个点击事件，而是您在页面上显示 1000 个项目，而这又需要这些点击事件。添加一些过滤并将页面/屏幕上的项目数量限制在合理的数量，例如 50 甚至 100。您可以使用各种分页技术和过滤控件来使用户的体验更易于管理。没有人愿意滚动浏览 1000 个项目来找到他们想要的。

标签： angular angular7

【解决方案1】：

要达到预期的效果，请使用以下使用类名和事件的选项

将 $event 和 cat 对象传递给第二个循环点击事件
使用 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>

codesandbox - https://codesandbox.io/s/20zzjqzm3n

【讨论】：

【解决方案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>

在 TS 中

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

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

【讨论】：