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

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

<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>

{{cat.name}
+
-

所需代码

<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>

{{cat.name}
+
-

但在event.target中，我只得到元素的HTML代码。

---

如何获取已绑定在该html元素上的角度对象？

您可以在元素上放置一些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>

---

要获得预期的结果，请使用下面使用类名和事件的选项

将$event和cat对象传递给第二个循环单击事件

使用event.target.className更新cat对象

从“@angular/core”导入{Component}；
@组成部分({
选择器：“应用程序根”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent{
title=“CodeSandbox”；
displayCat=“”；
服务=[
{
猫：[{名称：“1aaa1”，数量：10}，{名称：“1aaa2”，数量：10}]
},
{
猫：[{名称：“2AA1”，数量：20}，{名称：“2AA2”，数量：20}]
}
];
测试（事件，cat）{
如果（event.target.className==“增加”）{
cat.quantity++；
}
如果（event.target.className==“减少”）{
类别：数量；
}
如果（event.target.className==“cat”）{
this.displayCat=cat.name；
}
}
}

{{cat.name}
{{cat.quantity}}
+
-
显示Cat名称：
{{displayCat}}

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

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