Флажок 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 (), если число больше 3, значит, я не хочу его проверять. после того, как я нажимаю 4-ую мантру, я изменяю mantrasSelected на [true, true, true, false, false], но вид показывает, что это проверено. Как можно показать пользователю, что они отметили только три поля? Как две ставки работают с флажком? Спасибо.