【ionic4】——仿QQ消息提醒

    做项目过程中遇到一个需求，就是有新的信息增加了之后要有一个数量显示，然后就想到了类似QQ的新消息提示

效果如下：

具体实现：

HTML页面：

CSS样式：

TS中数据来源：

新建一个Model：

 public conditiongradeModelList = new Array<ConditiongradeModel>();

// 查询所有期数下的入职信息
  GetOnschool() {
    // const api = 'NO1System/no1/awardDetailsController/SelectAllInSchoolOrganization';
    const api = 'NO1System/no1/offerCheck/selectAllInSchoolOrganization';
    this.http.get(api).subscribe((Response: any) => {
      if (Response.json().status = 'ok') {
        this.onschoolList = Response.json().data;
        for (let i = 0; i < this.onschoolList.length; i++) {
          this.conditiongradeModel = new ConditiongradeModel();
          this.conditiongradeModel.organizationId = this.onschoolList[i].organizationId;
          this.conditiongradeModel.organizationName = this.onschoolList[i].organizationName;
          this.conditiongradeModel.checkState = this.onschoolList[i].checkState;
          this.conditiongradeModelList.push(this.conditiongradeModel);
          // 根据期数查询当前期数下所有人的入职信息
          this.sum = 0;
          const url = 'NO1System/no1/offerCheck/GetByOrganization?organizationId=' + Response.json().data[i].organizationId;
          this.http.get(url).subscribe((Res: any) => {
            this.sum = this.sum + Res.json().data.length; // 统计按期查的总人数
            this.OfferList = Res.json().data;
            this.conditiongradeModelList[i].conlist = this.OfferList;
            this.display = false;
            if (this.sum === 0) {
              this.display = true;
            }
          });
        }
      }
    });
  }

页面显示效果：