前言
在开发的过程中,如果后端一下子返回来一个数组,如果让数组按照自己设定的样式一条一条渲染到界面上呢?
实现效果
代码实现
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();
}
结语
这里面比较重要的就是一个循环的思想,因为是从后台返回的数据,不知道有几条及里面的内容是什么,所以前端需要根据后台返回的内容进行循环显示,最终渲染到界面上。