ngModel is not working when using in dynamic data scenario?

Question

Actually I am trying to create a custom datatable by using the Angular 4 cli and the JSON arrays. I have successfully created the table with dynamic column and the dynamic rows. so, that I want to fix a filter column for the table by using the dropdown checkbox style. Here is my code:

<div class="col-md-12">
    <div class="input-group">
      <div class="input-group-btn" dropdown>
        <button type="button" class="btn btn-primary dropdown-toggle" dropdownToggle>Filter
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu" *dropdownMenu>
          <div class="checkbox" *ngFor="let column of columns, let i = index" >
              <label for="column">
                <input [(ngModel)]="column" type="checkbox" id="column" name="column" value="column" checked="true"> {{column}}
              </label>
            </div>
        </div>
      </div>
    </div>

And my component.ts file code is:

StudentsDetails = [];

  columns: string[] = [];

  constructor(private newService: StudentsService) { }

  ngOnInit() {
    this.newService.fetchData()
    .subscribe(responseStudentsDetails => {
      this.StudentsDetails = responseStudentsDetails;
      this.columns = Object.keys(this.StudentsDetails[0]);
    })
  };

So, when I am trying to call the [(ngModel)]="column". It shows me the Error like: Uncaught (in promise): Error: Cannot assign to a reference or variable!

Answer 1

There are some limitations how you can use variables defined by *ngFor.

You can work around using:

[(ngModel)]="columns[i]"