mdc-checkbox: Check operation causes the next checkbox being checked

[xloc]

Describe the bug I used ngFor to generate serval checkbox and bind them to an array. But when I click on one checkbox, the checkbox next to it (at its right side) will also be checked. However, the log shows that only the one I click on is true, the one to its right is still false. Since am an Angular beginner, this problem might cause by my code.

To Reproduce This is the minimal code to reproduce the problem

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <ng-container *ngFor="let item of items;let index=index">
      <mdc-checkbox [disabled]="item === undefined" 
      [(ngModel)]="items[index]"
      (change)="onChange($event)"></mdc-checkbox>
    </ng-container>`
})
export class AppComponent implements OnInit{
  items: boolean[];
  ngOnInit(): void {
    this.items = Array(5).fill(false);
  }
  public onChange(event): void {
    console.table(this.items);
  }
}

Expected behavior The two-way binding works, and clicking only affects the checkbox that being clicked.

Screenshots I checked the first one only.

What Angular MDC version are you using? 0.44.0

What OS are you using?: macOS 10.13.6

What browser(s) is this bug affecting?: I tested it on Chrome and Safari, the same wrong result.