Angular 6复选框不会基于ngModel更改状态

Question

在一个数组中，说出我有五个口头禅，用户必须选择最多三个。这是我的实现

<input class='f-z-14' type="checkbox" [(ngModel)]='mantrasSelected[i]' [checked]='mantrasSelected[i] === true' (change)='mantraChecked(i, mantrasSelected[i], mantra)'>

还有我的

mantraChecked(i, event, mantra) {
    if (event) {
      if (this.selectedCount < 3) {
        this.selectedCount += 1;
        this.mantrasSelected[i] = true;
      } else {
        this.mantrasSelected[i] = false;
      }
    } else {
      if (this.selectedCount > 0 && this.selectedCount <= 3) {
        this.selectedCount -= 1;
        this.mantrasSelected[i] = false;
      }
    }
}

因此，如果我在this.mantrasSelected中选择前三个均值，则我将拥有[true, true, true, false, false]。因此，如果用户检查了第四位，则意味着我正在检入mantraChecked（），如果count大于3，则意味着我不想对其进行检查。单击第4个咒语后，我将mantrasSelected更改为[true, true, true, false, false]，但视图显示已选中。如何向用户显示他们只选中了三个框？复选框如何使用两个出价？谢谢。