蚂蚁金服参照模板是这样的但是是一个多选框 （9.3版本注意，例子里面少写了一个api nzShowCheckbox 用于显示前面选框的）
我的样式如下
只可选中一个，其他的选框默认取消
这块写的有点笨因为后端返回的数据不带 disabled，所以我用map添加了一个disabled属性
let list = res.result.data;let array = [];list.map((item, index) => {array.push(Object.assign(item, {disabled: false }))});this.DataList = list
主要设置在td里面所以就展示一下td代码吧
<tbody><tr *ngFor="let data of DataList; index as i"><td nzShowCheckbox [nzChecked]="data.disabled" (nzCheckedChange)="onItemChecked(data.id, $event,i)"></td><td>{{data.$displays.servant }}</td><td>{{data.properties.countyAttendenceCount}}</td><td>{{data.properties.countyAttendenceAllowance}}</td><td>{{data.properties.townAttendenceCount}}</td><td>{{data.properties.townAttendenceAllowance }}</td><td>{{data.properties.totalAttendenceAllowance }}</td><td>{{data.properties.execptionalAttendenceDeduct }}</td><td>{{data.properties.mailEvaluationDeduct }}</td><td>{{data.properties.unnormalLedgerDeduct }}</td><td>{{data.properties.unqualifiedStationCallRollDeduct }}</td><td>{{data.properties.unqualifiedCenterCallRollDeduct }}</td><td [ngClass]="data.properties.recheckAllowance ? 'Blue':'Blacks'">{{data.properties.totalAllowance }}</td><td [ngClass]="!data.properties.checkResult ? 'Red':'Blacks'">{{data.properties.checkAmount }}</td><td>{{data.properties.actualAmount }}</td></tr></tbody>
[nzChecked]=“data.disabled” checked这个是选中样式
(nzCheckedChange)=“onItemChecked(data.id, $event,i)” 拿到他的id（用于筛选）还有index
js代码
onItemChecked(id: number, checked: boolean, i: number): void {if (checked) {this.uploadId = id}if (id == this.DataList[i].id) {this.DataList.forEach(item => {item.disabled = false})this.DataList[i].disabled = true}this.updateCheckedSet(id, checked);this.refreshCheckedStatus();}
判断checked
然后将所有数组数据中的 disabled 赋值
就只有拿到的那一行数据取反
就OK了
