ionic4后端返回的数组渲染到界面上

前言

  在开发的过程中，如果后端一下子返回来一个数组，如果让数组按照自己设定的样式一条一条渲染到界面上呢？

实现效果

代码实现

  1.HTML界面布局

	<!-- 食物列表 -->
    <ion-list class="food_list" inset="true">
      <ion-item *ngFor="let item of foodList;let key=index;">
        <!-- 食物图片 -->
        <ion-thumbnail slot="start">          
          <!-- 获取本地的图片 -->
          <img [src]="item.pic" class="foodImg">
        </ion-thumbnail>
        <ion-label>
          <h3>
            {{item.foodName}}
          </h3>
          <p>
            ￥{{item.price}}  
            <br />          
            剩余{{foodnum[key]}}份                        
          </p>          
        </ion-label>
        <!-- 每份菜的数量选择 -->
        <div class="food_num">
          <div class="input_left" (click)="decNum(key)" color="primary">-</div>
          <div class="input_center">
            <input type="text" readonly="readonly" value="0" name="num" [(ngModel)]="num[key]" id="num">
          </div>
          <div class="input_right" (click)="incNum(key)">+</div>
        </div>
      </ion-item>
    </ion-list>

  2.scss界面样式

.food_list {
  clear: both;
}
.foodImg {
  width: 50px;
  height: 50px;
}
.food_num {
  float: right;
  width: 100px;
  display: flex;

  .input_left,
  .input_right {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background:#3880ff;
    border: 1px solid #f8f8f8;
    color: #fff;
    border-radius: 50%;
  }

  .input_center {
    flex: 1;
    height: 28px;
    line-height: 28px;
    input {
      border: 1px solid #fff;
      height: 28px;
      line-height: 28px;
      width: 100%;
      text-align: center;
    }
  }
}

  3.ts逻辑实现

  //定义食物列表
  foodList: any;

  // 根据日期去查今天中午的菜单，并循环显示
  QueryFoodByDate() {
    var maketime = "中午";
    var api = "OrderSystem/FoodMenus/QueryByDateAndEattime";
    api += `?orderDate=${this.date}&makeTime=${maketime}`;                           //this.date是获取的服务器时间
    this.common.ajaxGet(api).then((response) => {
      console.log(response);
      this.foodList = response;
    })
  }
  
  //调用这个函数
  ionViewDidEnter() {
    this.QueryFoodByDate();
  }

结语

  这里面比较重要的就是一个循环的思想，因为是从后台返回的数据，不知道有几条及里面的内容是什么，所以前端需要根据后台返回的内容进行循环显示，最终渲染到界面上。