图解
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/45cb2782f387710c85c00f684a22faf5.png)
效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/b49ca7a9e1bf78a8daa279ffb977c10c.png)
代码
<ion-item style="margin-top:10px;" *ngFor="let item of orderList">
<div>
<ion-icon name="browsers" style="font-size:25px"></ion-icon>
</div>
<div style="margin-left:20px">
<ion-label>订单{{item.orderid}}</ion-label>
<ion-label>
<p>总价:{{item.totalcost}}</p>
<p>时间:{{item.ordertime}}</p>
</ion-label>
</div>
<div style="margin-left:50px">
<ion-label>
<p>状态:待提交</p>
</ion-label>
</div>
<div style="margin-left:20px">
<ion-icon name="arrow-dropright"></ion-icon>
</div>
</ion-item>
<ion-infinite-scroll threshold="10%" (ionInfinite)="getOrderList($event)">
<ion-infinite-scroll-content loadingSpinner="crescent" loadingText="正在加载更多数据...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
export class TabPageOrder implements OnInit {
public tab = 'tabWaitSubmit';
public orderList:any[]=[];
constructor(public nav:NavController, public common:CommonService) {}
ngOnInit() {
this.getOrderList();
}
getOrderList(){
var api = 'OrderSystem/OrderDetailSheet/QueryHistoryOrderByCardNo?cardNo=E000033';
this.common.ajaxGet(api).then((response:any) =>{
console.log(response);
this.orderList = response;
})
}
}
笔记
ngOnInit() 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件;
ngOnInit() 钩子应该是我们用得最频繁的一个了,在使用命令 ng g component <component-name> 生成一个组件后,就有ngOnInit() 方法。
ngOnInit() 钩子可以作为初始化时调用一些方法。