2020年3月9日-五星好评的实现

直接上代码

HTML

<div class="star" *ngFor="let item of love_list1;let i = index">
  <div class="box">
    <img src="{{item.love}}" (click)="love1(i)" alt="">
    <img src="{{item.unlove}}" *ngIf="flag1 >= i" (click)="unlove1()" alt="">
  </div>
</div>

sass

.star {
        margin-left: 14px;
        display: inline-block;
        vertical-align: middle;
        white-space: nowrap;
        .box {
            position: relative;
            width: 20px;
            height: 20px;
            img {
                width: 18px;
                height: 18px;
                margin-right: 7%;
                position: absolute;
            }
        }
    }

TS

    import { Component, OnInit } from '@angular/core';
	import { NavController } from '@ionic/angular';
	
	@Component({
	  selector: 'app-shops-evaluation',
	  templateUrl: './shops-evaluation.page.html',
	  styleUrls: ['./shops-evaluation.page.scss'],
	})
	export class ShopsEvaluationPage implements OnInit {
	  public flag1: any;
	  public love_list1: any = [
	    {
	      love: '../../assets/images/stargrey.png',
	      unlove: '../../assets/images/starred.png'
	    },
	    {
	      love: '../../assets/images/stargrey.png',
	      unlove: '../../assets/images/starred.png'
	    },
	    {
	      love: '../../assets/images/stargrey.png',
	      unlove: '../../assets/images/starred.png'
	    },
	    {
	      love: '../../assets/images/stargrey.png',
	      unlove: '../../assets/images/starred.png'
	    },
	    {
	      love: '../../assets/images/stargrey.png',
	      unlove: '../../assets/images/starred.png'
	    },
	  ];
	  love1(e) {
	     this.flag1 = e;
	  }
	  unlove1(e) {
	    this.flag1 = e;
	  }