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

傷城~ 2022-02-12 10:28 259阅读 0赞

# 前言 #

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

# 实现效果 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

# 代码实现 #

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();
      }

# 结语 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20220212/ba5e67b89b704946902f0254041d5d3f.png