如何使用复选框 Angular 2 绑定数据？答案

【问题标题】：how to bind data with checkbox angular 2?如何使用复选框 Angular 2 绑定数据？
【发布时间】：2019-05-29 01:47:47
【问题描述】：

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 列中选择任何复选框，则应选择代码列（我只想在控制台日志中打印选择列行 CODE）

2) 如何将布尔值绑定到复选框列中，如果 active 为 false，则列名为 ISACTIVE 如果 active 为 true，则不选中复选框 -> 选中复选框！

这是我的 stackblits 链接，对你来说很容易！

https://stackblitz.com/edit/angular-gbf9kz-a2s4zc?file=app%2Ftable-basic-example.ts

【问题讨论】：

<mat-checkbox type="checkbox" [(ngModel)]="element.active">
谢谢@Ric，但是如果我从 SELECT 列中选择复选框，我想打印选定的行 CODE 列数据，你能帮帮我吗
在下面查看我的答案。它将允许您从选中的复选框中获取代码。

标签： angular typescript angular-material angular5

【解决方案1】：

使用 [checked] 和 (change) 显示 if is element.active=true 并更改 element.active 的值。并使用条件运算符显示（或不显示）element.code 的值

<ng-container matColumnDef="CODE">
  <mat-header-cell *matHeaderCellDef> CODE </mat-header-cell>
  <mat-cell *matCellDef="let element">
      {{ element.active?element.code:"" }} 
  </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" [checked]="element.active" 
                                   (change)="element.active=$event.checked">
     </mat-checkbox>
   </mat-cell>
</ng-container>

更新：更好地使用 ngModel -not [checked] and (change)-

<ng-container matColumnDef="ISACTIVE">
    <mat-header-cell *matHeaderCellDef> ISACTIVE </mat-header-cell>
    <mat-cell *matCellDef="let element">
        <mat-checkbox type="checkbox" [(ngModel)]="element.active">
        </mat-checkbox>
    </mat-cell>
</ng-container>

【讨论】：

【解决方案2】：

根据您要处理的复杂程度，您可以采用表单方法（推荐），也可以在复选框中添加一个简单的更改处理程序。

组件

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 中拥有一组选定的代码。从那里如何处理它们取决于您。

闪电战：https://stackblitz.com/edit/angular-gbf9kz-sgtrtv

【讨论】：

是的，你是对的！当我从 CHECKBOX 列中选择复选框时，我想打印代码列值，但实际上我想将此 CODE 值传递给 API，你得到我的 Qn 了吗？那么你能告诉我如何将此代码值存储到任何变量中吗？
您可以使用receiveCheckboxChange 中的code 值做任何您想做的事情 - 您可以将其存储为变量、将其添加到数组或直接调用 API。由你决定。 :)
如何将该代码值存储到变量中？你能告诉我吗！
只有一个错误，您应该在 SELECT 列复选框的基础上显示选定的 CODE，谢谢！

【解决方案3】：

<ng-container matColumnDef="SELECT">
                <mat-header-cell *matHeaderCellDef> SELECT </mat-header-cell>
                <mat-cell *matCellDef="let element">
                  <mat-checkbox [(ngModel)]="element.Isselected" (change)="change()">
                  </mat-checkbox>
                </mat-cell>
              </ng-container>

在ts文件中

change() {
    const result = this.offersColumnRowData.filter(x => x.Isselected == true);

console.log('result', result);
  }

json中的isselected属性

"Isselected": false,
  "code" : "TEST",
  "projectId" : "PROJECT",
  "name" : "TEST",
  "description" : "test",
  "level1" : "1 ",
  "level2" : "2 ",
  "level3" : "3",
  "level4" : "4",
  "level5" : "5",
  "active" : false

【讨论】：

【解决方案4】：

我更新了你的 stackblitz，检查：https://stackblitz.com/edit/angular-gbf9kz-qg9fvw?file=app%2Ftable-basic-example.ts

使用[checked]="element.active"在复选框html标签上绑定数据

使用(change)="change(element)"获取活动属性值

【讨论】：

谢谢您，先生，但是您只解决了一个查询，如果我从 SELECT 列中选择复选框，我也想要这个查询，我想打印选定的行 CODE 列数据，您能帮帮我吗
我更新了 stackblitz 项目。告诉我这是否符合您的预期。
你 90% 正确，但我不想要整行，我只想要 CODE 列值。当我从 SELECT 列中选择复选框时，我想将代码列值存储到任何变量中！
那么你只需要这样做。 = element.code 进入 print() 方法。