Question

     <ul>
       <li class="daily">some text </li>
       <li class="daily">some text </li>
       <li>Random li without daily class on it </li>
       <li>Random li without daily class on it </li>
       <li class="daily">some text </li>
       <li> Random li without daily class on it </li>
       <li class="daily">some text </li>
       <li>Random li without daily class on it </li>
       <li class="daily">some text </li>
       <li class="daily">some text </li>
       <li>Random li without daily class on it </li>
       <li class="daily">some text </li>
     </ul>

我有一个组件，它的模板有几个ul元素（上面只是其中之一），每个都有多个li元素，其中class="daily"随机位于<li>s 。如果要单击任何daily()（具有“每日”类），我想调用在组件内部定义的方法li。如何在不将(click)="daily()"附加到每个li元素上的情况下实现这一点。注意：这里使用* ngFor是将点击事件绑定到<li>s这样的随机序列的乏味方法。

Answer 1

您可以点击ul并捕获函数中单击的子元素。

HTML：

<ul (click)="onClick($event)">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>
<h2>{{elementClicked}}</h2>

组件：

  elementClicked = 'Click any of the list item below'

  onClick(e) {
    this.elementClicked = 'You clicked: ' + e.target.innerHTML;
  }

演示： https://stackblitz.com/edit/angular-ktt1qj?file=app/list-overview-example.ts

Answer 2

只需创建一个onClick之类的函数，然后按以下示例在click by元素上调用它即可：

<li class="daily" (click)="onClick('some text')">some text </li>

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

@Component({
  selector: 'app-component',
  templateUrl: './app-component.html',
  styleUrls: ['./app-component.scss']
})

export class AppComponent{


    onClick(param){
      console.log(param);
      //Do something
    }


}

Answer 3

更好的方法是：

在组件中

values: string[] = ['A', 'B', 'C', 'D'];

daily(value: string): void {
   // do some action with the passed value
}

在HTML中

<ul>
   <li class="daily" *ngFor="let v of values" (click)="daily(v)">{{ v }}</li>
</ul>

只有一个（单击）事件绑定，并且绑定到该事件的函数接受该值，因此您可以在 daily 方法中执行所需的任何操作。

编辑：我没有信誉评论您的问题。希望您能看到编辑内容。您为什么认为将（click）事件绑定到

元素没有效果？

最好花一些时间并重构代码。与其拥有数百个带有“ daily”类的

元素，不如拥有一个返回对象数组（硬编码或异步）的服务更好。这些对象应该具有值（在您的情况下为数字），并通过删除上面显示的三行中的数百行不必要的

来简化视图。

从长远来看，最好还是读取服务的值（硬编码或从服务器异步返回），而不是一遍又一遍地复制粘贴。

希望这会有所帮助。

如何将单击事件绑定到角度2中的ul元素内的随机li元素

3 个答案: