Angular +Ionic实现关注与取消关注

1.html中：

<div class="middle-rate-shop-name" *ngIf="isShowContent">
      <div class="middle-rate-shop-name-img" >
        <img [src]="shopInfoList.storeLogo">
      </div>
      <div class="middle-rate-shop-name-text">
        <div class="rate-shop-name-text-qzh">
         {{shopInfoList.shortName}}
        </div>
        <span><img src="../../../assets/icon/search-icon/golden.png" alt="">{{shopInfoList.memberLevel}}</span>
      </div>
      <div class="middle-rate-shop-name-concern">
       <div class="concern" *ngIf="!concernIs" (click)="concernIsNo()">
        <img src="../../../assets/icon/search-icon/concern.png" alt="">
        关注
       </div>
       <div class="unconcern" *ngIf="concernIs"  (click)="concernIsNo()">
        已关注
       </div>
     </div>
 </div>
</div>

2.ts

 public concernIs:boolean;//是否关注
 public newOnLine = {
    storeId:'',
  };
  
  constructor(
    private rest: RestService,
    //引入路由
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private navCtrl: NavController,
   
    private loadingCtrl: LoadingController,
    public appService: AppService,
    public localStorageService: StorageService,
    private toastCtrl: ToastController
  )
  {  
     super(appService, localStorageService);
    this.goodsId = this.activatedRoute.snapshot.paramMap.get('goodsId');
    this.storeId = this.activatedRoute.snapshot.paramMap.get('storeId');
  }

  //6,关注店铺
  async  getStoreinsert() {
    const goodsReq = {
      'storeId':this.newOnLine.storeId,
    }
    this.rest.apiPost(goodsReq, this.rest.getStoreinsert).subscribe(res => {
      const { status, msg, data } = res;
      if (status == 200) {
        this.concernIs=true;
        console.log("关注店铺",data);
        alert("关注成功")
      } else {
        console.log("请求失败");
      }
    });
  }
  //7,取消关注
  async getdeletByStoreId() {
    const goodsReq = {
      ids:this.newOnLine.storeId,	//店铺的ID
    }
    await this.rest.apiPost(goodsReq, this.rest.getdeletByStoreId).subscribe(res => {
      const { status, msg, data } = res;
      if (status == 200) {
        console.log("======取消关注=======");
        alert("取消成功")
      } else {
        console.log("请求失败");
      }
    });
  } 



  //8,6<-->7取消与关注店铺
  concernIsNo(){
    this.concernIs=!this.concernIs
    //关注
    if(this.concernIs){
      this.getStoreinsert();
    //取消关注
    }if(!this.concernIs){

     this.getdeletByStoreId();
    }
  }

3.效果