时间戳

首页 > 解决方案 > mat-checkbox 角度中的意外令牌错误

angular - mat-checkbox 角度中的意外令牌错误

问题描述

<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>

尝试加载页面时，出现以下错误：

未捕获的错误：模板解析错误：解析器错误：ng:///AppSharedModule/BellNotificationComponent.html@43:12 中 [bellNotification.status==='READ'=$event] 的第 33 列中出现意外的标记 '='（"
][(ngModel)]="bellNotification.status==='READ'" (click)="$event.stopPropagation()" class="md-18"> "): ng:///AppSharedModule/BellNotificationComponent。 html@43:12

我尝试用打字稿中的函数替换它，我仍然得到类似的错误。

我尝试用打字稿中的值替换它，它有效，但它不能动态更新，因为它只是来自 ts 并且不依赖于 for 循环迭代器。

有人可以帮我指出我正在使用的语法中的错误。

我是 Angular 的新手。非常感谢参考链接。

标签： angularangular-material

解决方案

表达式中的条件绑定[(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

推荐阅读