angular - 垫复选框 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: Template parse errors: Parser Error: Unexpected token '=' at column 33 in [bellNotification.status==='READ'=$event] in ng:///AppSharedModule/BellNotificationComponent.html@43:12 ("
][(ngModel)]="bellNotification.status==='READ'" (click)="$event.stopPropagation()" class="md-18"> "): ng:///AppSharedModule/BellNotificationComponent.html@43:12

我试着用 typescript 中的函数替换它，我仍然得到类似的错误。

我尝试用 typescript 中的值替换它，它起作用了，但它不能动态更新，因为它仅来自 ts 并且不依赖于 for 循环迭代器。

谁能帮我指出我使用的语法中的错误。

我是 Angular 的新手。非常感谢引用链接。

Answer 1

[(ngModel)] 表达式中的条件绑定(bind)将不起作用(我从来没有这样使用过)!

您可以使用 [checked] 属性来选中/取消选中复选框，条件如下:

<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