Question

我要做的是当我点击该行的任何部分时，将复选框更改为选中/取消选中。我也在改变所选行的颜色。这是我得到的：

player.component.html：

<!-- Table showing players -->
<tbody *ngFor="let volunteer of volunteers; let i = index">
  <tr class="margin" (click)="setClickedRow(i)" [class.active]="selectedRows[i]==true">
    <td>
      <input type="checkbox" />
    </td>
    <td style="font-weight: bold">{{player.name}}</td>
    <td>{{player.number}}</td>
  </tr>
</tbody>

player.component.ts：

export class PlayerComponent implements OnInit {
    selectedRows: boolean[] = [false, false, false, false];
    setClickedRow: Function;

    player = [
        { name: 'Jaden', number: '2' },
        { name: 'Mickey', number: '10' },
        { name: 'Dexter', number: '22' },
        { name: 'Pedro', number: '11' },
    ];

    constructor() {

        this.setClickedRow = function (index) {
            if (!this.selectedRows[index]) {
                this.selectedRows[index] = true;
            }
            else {
                this.selectedRows[index] = false;
            }
        };
    }

    ngOnInit() { }
}

无论我点击的行的哪一部分，我都希望更改复选框。

Answer 1

只需绑定checked属性？

<input type="checkbox" [checked]="selectedRows[i]" />

Answer 2

首先删除

this.setClickedRow = function(index){...

来自构造函数的内部。然后设置为：

setClickedRow (index) {
  console.log("Clicked")
  this.selectedRows[index]=!!this.selectedRows[index];
};

现在点击行检查控制台。

DEMO

AngularJS - 使用Typescript更改所选行的复选框状态

2 个答案: