Как разделить элементы angular2 +?

Question

Я пытаюсь сделать рейтинг звездочек, но мне нужно отобразить более одной звездочки рейтинга, используя * ng, как здесь!

Но когда я наведите курсор на первую звезду, первая звезда в других звездах также расколется так!

код здесь ...

          <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», что означает, что в вашем классе у вас есть массив с именем 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 и т. д.), и вам, вероятно, все равно это не нужно).

Но да, если вам нужна дополнительная помощь, относящаяся к вашим фактическим данныммодель, не стесняйтесь размещать свой код класса (машинопись), чтобы мы могли видеть, что вы пытаетесь сделать:)