Неожиданная ошибка токена в mat-checkbox angular

Question

<div *ngFor="let bellNotification of earlierBellNotifications">
    <mat-checkbox (change)="updateNotificationEventStatus(bellNotification.key, $event)"
      [(ngModel)]="bellNotification.status==='READ'" (click)="$event.stopPropagation()" class="md-18">
      <span class="wd-notification-event-checkbox" i18n>MARK AS READ</span>
    </mat-checkbox>
</div>

При попытке загрузить страницу я получаю следующую ошибку:

Uncaught Error: Ошибки синтаксического анализа шаблона: Ошибка Parser: неожиданный токен '=' в столбце 33 в [bellNotification.status === 'READ' = $ event] в ng: ///AppSharedModule/BellNotificationComponent.html@43: 12 ("
] [(ngModel)] = "bellNotification.status === 'READ'" (click) = "$ event.stopPropagation ()" class = "md-18"> "): ng: ///AppSharedModule/BellNotificationComponent.html@43: 12

Я попытался заменить его функцией из машинописного текста, но я все еще получаю похожую ошибку.

Я попытался заменить его значением из машинописного текста, это сработало, но не может быть динамически обновлено, поскольку оно просто приходит из ts и не зависит от итератора цикла for.

Может кто-нибудь помочь мне указать на ошибку в синтаксисе, который я использую.

Я новичок в Angular. Ссылочные ссылки приветствуются.

Answer 1

Условное связывание в выражении [(ngModel)] не будет работать (я никогда так не использовал) !

Вы можете использовать атрибут [checked] для check/uncheck флажок с условием типа:

<div *ngFor="let bellNotification of earlierBellNotifications">
    <mat-checkbox (change)="updateNotificationEventStatus(bellNotification.key, $event)"  
        \/\/\/
      [checked]="bellNotification.status === 'READ'" (click)="$event.stopPropagation()" class="md-18">
      <span class="wd-notification-event-checkbox" i18n>MARK AS READ</span>
    </mat-checkbox>
</div>

Working_Demo