Question

我想为按钮＆所属的li分配一个ID，以了解已点击哪个li 的按钮

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

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

             <button class="btn btn-success" (click)="onOk()" > ok</button> 

              </li>
        </ul>

Answer 1

您的HTML模板

<ul class="list-group">  
   <li class="list-group-item" *ngFor="let post of posts; let i = index" [class.highlight]="post.clicked"> 
      <p > {{  post.title }} </p>
      <button class="btn btn-success" (click)="onOk(i)">ok</button> 
   </li>
</ul>

您的组件TS

onOk(index: number) {
   const post = this.posts[index];
   post.clicked = true; // you may toggle it
}

您的CSS / SCSS

   .highlight {
      background-color: blue;
   }

请确保您的POST接口声明了clicked，并且POSTS首先单击了初始化为false。

Answer 2

您可以将id添加到li元素或按钮中，并使用它来设置样式，或者，只需使用$event对象来找到父项li按钮并更改样式。

这里是您的情况的stackblitz demo。

 <ul class="list-group">  
       <li class="list-group-item" *ngFor="let post of posts; let i = index"  id="post-{{i}}"> 

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

             <button class="btn btn-success" (click)="onOk($event)" id="btnPost{{i}}"> ok</button> 

              </li>
        </ul>

现在您已在组件中，更改单击的li按钮的样式：

onOk($event: Event) {
    $event.srcElement.parentElement.style.backgroundColor = 'Green';
    $event.srcElement.parentElement.style.color = 'Yellow';
}

编辑：-----也更新了stackblitz示例

您还可以使用列表上的模式，使用ngStyle通过HTML设置样式：

<ul class="list-group">
    <li class="list-group-item" *ngFor="let post of posts; let i = index" id="post-{{i}}" 
     [ngStyle]="{'background-color':clicked[i] ? 'green' : 'red' }">

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

        <button class="btn btn-success" (click)="clicked[i] = true" > ok</button> 

              </li>
        </ul>

在该组件中只有：clicked = [];

为循环产生的按钮分配一个ID

2 个答案: