如何分离元素angular2+？

Question

我正在尝试制作星级，但我需要像这里一样使用 *ngFor 显示多个星级！

但是当我在第一颗星上hover时，其他星上的第一颗星也这样被挡住了！

代码在这里...

          <div *ngFor="let item of l">
              <input type="text" class="form-control">
              <a *ngIf="!boldStar" (click)="getRate($event)" (mouseover)="boldStar=true" (mouseleave)="boldStar = false" id=1><i class="far fa-star" id=2></i></a>
              <a *ngIf="boldStar" (click)="getRate($event)" (mouseover)="boldStar=true" (mouseleave)="boldStar = false" id=1><i class="fas fa-star" id=2></i></a>
              <a (click)="getRate($event)" id="2"><i [ngClass]="boldStar ? 'fas fa-star' : 'far fa-star'" id="2"></i></a>
              <a (click)="getRate($event)" id="3"><i [ngClass]="boldStar ? 'fas fa-star' : 'far fa-star'" id="3"></i></a>
              <a (click)="getRate($event)" id="4"><i class="far fa-star" id="4"></i></a>
              <a (click)="getRate($event)" id="5"><i class="far fa-star" id="5"></i></a>
          </div>

Answer 1

在您的*ngFor ，您说的是“let item of l”，这意味着在您的 class 中，您有一个名为l的数组，看起来它里面有 2 个项目（假设您在示例中获得了 2 行星号） .

在您的 ngFor'd div 中，当您渲染星星时，您需要参考您的item来确定该特定行中的这些星星是否为粗体。

例如（我只是在猜测，因为我看不到您的代码... <i [ngClass]="item.boldStar1? 'fas fa-star': 'far fa-star'">

但是您在三元检查中所做的工作取决于每个项目的数据类型......例如，您可能只是将星number存储为 1-5 的数字。

<i [ngClass]="item >= 1 ? 'fas fa-star' : 'far fa-star'">
<i [ngClass]="item >= 2 ? 'fas fa-star' : 'far fa-star'">
<i [ngClass]="item >= 3 ? 'fas fa-star' : 'far fa-star'">
<i [ngClass]="item >= 4 ? 'fas fa-star' : 'far fa-star'">
<i [ngClass]="item >= 5 ? 'fas fa-star' : 'far fa-star'">

（另外，旁注，避免使用这样的id属性，因为您有重复项（例如，多个 1 和 2 等）并且您可能无论如何都不需要它）。

但是，是的，如果您需要针对实际数据 model 的更多帮助，请随时发布您的 class （打字稿）代码，以便我们了解您要执行的操作：）