将复选框的选中值绑定到角度对象的布尔属性

Question

I am trying to bind the value of a checkbox to a boolean variable in an object. The checkbox is used inside of a table. The functionality that I am trying to achieve is that when I click the checkbox, it should toggle the boolean variable in the object and the result of which would be shown on the html.

I am using the below code to achieve the same:

HTML:

<tr *ngFor="let item of getListOfItems(); let i = index">
  <td>{{ i+1 }}</td>
  <td>{{ item.action }}</td>
  <td><input name="chk" type="checkbox" [(ngModel)]="item.isComplete" /></td>
  <td [ngSwitch]="item.isComplete">
    <span *ngSwitchCase="true">Yes</span>
    <span *ngSwitchDefault>No</span>
  </td>
</tr>

Component:

getListOfItems() {
  var items = [
    new TodoItem('Buy Flowers', false),
    new TodoItem('Get Shoes', false),
    new TodoItem('Collect Tickets', true),
    new TodoItem('Call Joe', false),
  ];

  return items; 
}

TodoItem Class

export class TodoItem {
    action: string;
    isComplete: boolean;

    constructor(action: string, isComplete) {
        this.action = action;
        this.isComplete = isComplete;
    }
}

However, when I run the app, the browser keeps on loading the page and freezes after a period of time. When I comment this checkbox , everything comes back to normal and the code works fine. Could not figure out a solution. Any help would be appreciated.

Answer 1

It has been a while so i may be rusty,but the below should work.

  <td><input  type="checkbox"  [checked]="item.isComplete" (change)="item.isComplete= !item.isComplete"  /></td>

Make sure you have explicitly decalred isComplete in your TodoItem as boolean

EDIT: It was just one way binding, It does not suit your use case. Coming to your original code.

The actual problem is,

getListOfItems() {
  var items = [
    new TodoItem('Buy Flowers', false),
    new TodoItem('Get Shoes', false),
    new TodoItem('Collect Tickets', true),
    new TodoItem('Call Joe', false),
  ];

  return items; 
}

On each call of <tr *ngFor="let item of getListOfItems(); let i = index"> the method is being called and it will return a new array containing the same items. The result is a never ending for loop. The best way to avoid this is initialize the array once outside this method and return just the instance in this method like below

items = [
    new TodoItem('Buy Flowers', false),
    new TodoItem('Get Shoes', false),
    new TodoItem('Collect Tickets', true),
    new TodoItem('Call Joe', false),
  ];

  getListOfItems() {


  return this.items; 
}

I am sure this is just for testing, you will eventually get the data from server in a service class. For now, this will solve the problem And you original binding will work

<td><input name="chk" type="checkbox" [(ngModel)]="item.isComplete" /></td>

Note: if you are using form group, better to have a different name for each checkbox

Answer 2

The problem is caused by getListOfItems() returning a new array instance for every call.

Rather assign the value of the method to a property:

  items: Array<TodoItem>

  ngOnInit(): void {
    this.getListOfItems();
  }

  getListOfItems() {
    var items = [
      new TodoItem('Buy Flowers', false),
      new TodoItem('Get Shoes', false),
      new TodoItem('Collect Tickets', true),
      new TodoItem('Call Joe', false),
    ];

    this.items = items; 
  }

StackBlitz