效果圖:

主要是解決分頁問題;

data選url的方式

html:

<page-header>
<ng-template #tab>
<nz-tabset [nzSize]="default">
<nz-tab [nzTitle]="message_model.all|translate" (nzSelect)="select()"></nz-tab>
<nz-tab [nzTitle]="message_model.success|translate" (nzSelect)="select(1)"></nz-tab>
<nz-tab [nzTitle]="message_model.running|translate" (nzSelect)="select(2)"></nz-tab>
<nz-tab [nzTitle]="message_model.failure|translate" (nzSelect)="select(4)"></nz-tab>
</nz-tabset>
</ng-template>
</page-header>

<nz-card>
<st #st [data]="url" showSizeChanger ps="2" [noResult]="no_data|translate" [req]="req" [res]="res" [columns]="columns"></st>
</nz-card>

ts:

import { Component, OnInit, ViewChild } from @angular/core;
import { _HttpClient } from @delon/theme;
import { STColumn, STComponent, STReq, STRes } from @delon/abc;
import { I18NService } from @core/i18n/i18n.service;

@Component({
selector: app-message-task,
templateUrl: ./task.component.html,
})
export class MessageTaskComponent implements OnInit {
constructor(
private i18n: I18NService
) { }
url = `api/operation/info/`
status = ""; //status=空，全部 ,或者((1, "成功"), (2, "執行中"), (3, "取消"), (4, "失敗"))

//定義請求的參數
req: STReq = {
reName: {
pi: page,
ps: size
},
params: {
status: this.status
}
}

//定義返回的參數
res: STRes = {
reName: {
total: count,
list: results
}
}

@ViewChild(st) st: STComponent;
columns: STColumn[] = [
{ title: this.i18n.fanyi(message_model.type), index: operate_type },
{ title: this.i18n.fanyi(message_model.task_num), type: number, index: task_num },
{ title: this.i18n.fanyi(message_model.suc_num), type: number, index: suc_num },
{ title: this.i18n.fanyi(message_model.fail_num), type: number, index: fail_num },
{ title: this.i18n.fanyi(message_model.start_time), type: date, index: start_time },
{ title: this.i18n.fanyi(message_model.end_time), type: date, index: end_time },

];

ngOnInit() {}

select(status) {
this.status = status;
this.st.load(1, { status: this.status })
}
}

推薦閱讀：