1

我有一个简单的列表，其中包含来自循环的几行。当我单击或悬停在任何行上时，它会变为活动状态，再次单击其他行时，当前行将处于活动状态，而上一个行将处于非活动状态。直到现在工作正常。但是在该行中有一些图标我需要显示或隐藏与活动相同。当我悬停/单击时，这些图标将显示并再次隐藏鼠标或单击下一行。这是代码以下

app.component.html

<ul>
  <li  *ngFor="let row of groups;let i = index" [ngClass]="{'active': clickedIndex == i}" (click)="clickedIndex == i? clickedIndex = null : clickedIndex = i"><span>{{row.items}}</span>---><span>Icon1</span><span>Icon2</span></li>
  </ul>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  clickedIndex: number = 0


  groups = [{ "id": 1, "name": "pencils", "items": "red pencil", "Status": [{ "id": 1, "name": "green" }, { "id": 2, "name": "red" }, { "id": 3, "name": "yellow" }], "loc": [{ "id": 1, "name": "loc 1" }, { "id": 2, "name": "loc 2" }, { "id": 3, "name": "loc 3" }] }, { "id": 2, "name": "rubbers", "items": "big rubber", "Status": [{ "name": "green" }, { "name": "red" }], "loc": [{ "name": "loc 2" }, { "name": "loc 3" }] }, { "id": 3, "name": "rubbers1", "items": "big rubber1", "Status": [{ "name": "green" }, { "name": "red" }], "loc": [{ "name": "loc 2" }, { "name": "loc 3" }] }]
}

app.component.css

.active{
background:red;
color:#FFf;
}
4

4 回答 4

2

要达到预期的结果，请使用以下选项，将 *ngIf(*ngIf="clickedIndex == i")用于跨度中的两个图标

<ul>
  <li  *ngFor="let row of groups;let i = index" [ngClass]="{'active': clickedIndex == i}" (click)="clickedIndex == i? clickedIndex : clickedIndex = i"><span>{{row.items}}</span>---><span *ngIf="clickedIndex == i">Icon1</span><span *ngIf="clickedIndex == i">Icon2</span></li>
  </ul>

工作代码供参考

https://stackblitz.com/edit/angular-hppkxl?file=src/app/app.component.html

要在悬停/单击时显示/隐藏图标，请使用 mouseenter 事件和另一个可变的 hoveredIndex

<ul>
  <li (mouseenter) ="hoveredIndex == i? hoveredIndex = null : hoveredIndex = i" *ngFor="let row of groups;let i = index" [ngClass]="{'active': clickedIndex == i}" (click)="clickedIndex == i? clickedIndex = null : clickedIndex = i"><span>{{row.items}}</span>--->
  <ng-container><span  *ngIf="hoveredIndex == i || clickedIndex == i">Icon1</span><span *ngIf="hoveredIndex == i || clickedIndex == i">Icon2</span>
  </ng-container>
  </li>
  </ul>

工作代码供参考：

https://stackblitz.com/edit/angular-ddytef?file=src/app/app.component.html

于 2019-09-13T18:32:11.810 回答
1

您可以利用mouseenter和mouseleave事件来实现这一点。设置一个新变量，例如on并将其设置hoveredIndex为on 。然后只需将必要的条件添加到您的imouseenternullmouseleavengIf

<ul>
    <li *ngFor="let row of groups;let i = index" 
        [ngClass]="{'active': clickedIndex == i || hoveredIndex === i}" 
        (click)="clickedIndex = i" 
        (mouseenter)="hoveredIndex = i" 
        (mouseleave)="hoveredIndex = null">
        <span>{{row.items}}</span>
        ---><span *ngIf="clickedIndex == i || hoveredIndex === i">Icon1</span>
        <span *ngIf="clickedIndex == i || hoveredIndex === i">Icon2</span>
    </li>
</ul>

这是StackBlitz上的一个工作示例。

于 2019-09-14T10:50:25.010 回答
0

你不需要使用 Angular。您可以使用pseudo元素:hovercss

于 2019-09-13T18:33:45.320 回答
0

您可以使用ng-containerwith*ngIf显示/隐藏跨度图标。

试试这样：

<ul>
    <li *ngFor="let row of groups;let i = index" [ngClass]="{'active': clickedIndex == i}" (click)="clickedIndex == i? clickedIndex = null : clickedIndex = i">
        <span>{{row.items}}</span>---> 
        <ng-container *ngIf="clickedIndex == i">
           <span>Icon1</span><span>Icon2</span>
        </ng-container>
  </li>
</ul>

工作演示

于 2019-09-13T18:40:55.747 回答