Question

我从ts检索数据并通过模板显示这些数据由 * ngFor 进行迭代，每次迭代都应创建一个按钮。我注意到所有项目共享相同的（点击）事件。

如何将它们分开，以便让每个li的每个按钮都有自己的（单击）

例如，如果我的功能确实计算了点击次数，如果我在第一项中单击2次，则算为2次点击；如果我第一次单击第二项，则将其计为第三次点击。

当单击单独的li时，应该重新设置计数

    <li class="list-group-item" *ngFor="let post of posts"  > 

    <h3> {{ post.title }} </h3>  

        <button class="btn btn-success" (click)="onheight()" >height!</button>

Answer 1

您可以使用此语法创建索引，并将其传递给按钮的click方法。

<li class="list-group-item" *ngFor="let post of posts; index as postId"  > 
  <h3> {{ post.title }} </h3>  
  <button class="btn btn-success" (click)="onLoveIt(postId)" >{{post.buttonContent}}</button> 
</li>

然后在您的PostsComponent.ts中：

export class PostComponent {
    posts = [
        {title:'First Post',buttonContent:'First Button'},
        {title:'Second Post',buttonContent:'Second Button'}
    ];

    constructor() {}

    onLoveIt(postId: Number) {
        if (postId === 0) {
            //perform first button method
        } else if (postId === 1) {
            //perform second button method
        }
    }
}

Answer 2

尚不清楚您要问的内容是什么，但并非100％清楚，您似乎很难区分在post中单击了什么（ngFor）迭代。

如果我的理解是正确的，则只需传递post

即可轻松判断出他们正在与哪个帖子互动

即：

<button class="btn btn-success" (click)="onheight(post)" >height!</button>

注意，您将需要在函数中添加一个接受post

的参数。

onheight(post): void { ... }

如果（出于某种原因）您需要访问element本身，那么您也可以传入$event。

即：

<button class="btn btn-success" (click)="onheight($event, post)" >height!</button>

onheight(evt, post): void { ... }

Answer 3

我不会说英语，但我会尝试的，您可以创建相同的按钮并按参数传递元素

HTML

<li class="list-group-item" *ngFor="let post of posts"  > 
  <h3> {{ post.title }} </h3>  
  <button class="btn btn-success" (click)="onLoveIt(post)" >Love it!</button> 
</li>

TS

  onLoveIt(post) {
    // Here you manage specific item with the paramater post
  }

如果要更改名称按钮，则可以在数组中添加属性名称按钮和发布数据

单独的点击事件功能

3 个答案: