JSON
[ {
"code" : "TEST",
"projectId" : "PROJECT",
"name" : "TEST",
"description" : "test",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test",
"projectId" : "PROJECT",
"name" : "Test",
"description" : "test 11",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "asdasd2122",
"projectId" : "PROJECT",
"name" : "TEST12",
"description" : "ashdasdhl",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : false
}, {
"code" : "test1a",
"projectId" : "PROJECT",
"name" : "TEST122",
"description" : "a,sndkajlskdjlkajd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
}, {
"code" : "dasdasd",
"projectId" : "PROJECT",
"name" : "test123123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
},
{
"code" : "asdasdTES",
"projectId" : "PROJECT",
"name" : "TEST123",
"description" : "asdasdasd",
"level1" : "1 ",
"level2" : "2 ",
"level3" : "3",
"level4" : "4",
"level5" : "5",
"active" : true
} ]
HTML
<mat-table [dataSource]="offersColumnRowData" matSort matSortActive="NAME">
<ng-container matColumnDef="SELECT">
<mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox>
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="NAME">
<mat-header-cell *matHeaderCellDef> NAME </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.name }} </mat-cell>
</ng-container>
<ng-container matColumnDef="CODE">
<mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
<mat-cell *matCellDef="let element">{{ element.code }} </mat-cell>
</ng-container>
<ng-container matColumnDef="DESCRIPTION">
<mat-header-cell *matHeaderCellDef> DESCRIPTION </mat-header-cell>
<mat-cell *matCellDef="let element"> {{ element.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="CREATEDATE">
<mat-header-cell *matHeaderCellDef> CREATEDATE </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="UNAME">
<mat-header-cell *matHeaderCellDef> UNAME </mat-header-cell>
<mat-cell *matCellDef="let element"> </mat-cell>
</ng-container>
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox">
</mat-checkbox>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="offersColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: offersColumns;" (mouseover)="row.hovered = true" (mouseout)="row.hovered = false"></mat-row>
</mat-table>
我正在尝试将值绑定到复选框中!布尔形式的值 (TRUE|FALSE)
我试图绑定 with 复选框,但它不起作用
说明:转到我的 stackblitz -> 如果我从 SELECT 列中选择任何复选框,则应选择代码列(我只想在控制台日志中打印选择列行代码)
2) 如何将布尔值绑定到复选框列中,如果活动为假,则列名称为 ISACTIVE 如果活动为真,则未选中复选框 -> 选中复选框!
这是我的stackblits链接,对您来说很容易!
https://stackblitz.com/edit/angular-gbf9kz-a2s4zc?file=app%2Ftable-basic-example.ts
根据您要处理的复杂程度,您可以采用表单方法(推荐),也可以向复选框添加一个简单的更改处理程序。
成分
selectedCodes: string[] = [];
receiveCheckboxChange(code: string, value: MatCheckboxChange) {
console.log(code, value.checked);
this.updateCodes(code, value.checked);
}
updateCodes(code: string, selected: boolean) {
const inArrayIndex: number = this.selectedCodes.indexOf(code);
if (selected && inArrayIndex === -1) {
this.selectedCodes.push(code);
} else if (inArrayIndex !== -1) {
this.selectedCodes.splice(inArrayIndex, 1);
}
}
isSelected(code: string) {
return this.selectedCodes.indexOf(code) !== -1;
}
模板
<ng-container matColumnDef="ISACTIVE">
<mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
<mat-cell *matCellDef="let element">
<mat-checkbox type="checkbox" (change)="receiveCheckboxChange(element.code, $event)" [checked]="isSelected(element.code)">
</mat-checkbox>
</mat-cell>
</ng-container>
这里的关键部分是(change)="receiveCheckboxChange(element.code, $event)"
- 您可以从element
或整个element
对象本身向您的函数提供您想要的任何信息。然后由您决定从那里做任何您想做的事情。
然后,您将在变量中拥有一组选定的代码selectedCodes
。你从那里对他们做什么,取决于你。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句