【问题标题】:Unexpected token error in mat-checkbox angularmat-checkbox 角度中的意外令牌错误
【发布时间】:2019-06-01 21:27:11
【问题描述】:
<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>

尝试加载页面时,出现以下错误:

未捕获的错误:模板解析错误:解析器错误:意外的令牌 '=' 在 [bellNotification.status==='READ'=$event] 的第 33 列 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 的新手。非常感谢参考链接。

【问题讨论】:

  • ([ngModel])替换[(ngModel)]
  • 我会试试的。有什么具体原因吗?
  • 您发布的代码没有任何问题,我使用它并替换然后工作!
  • 这可能是您比较两个值然后将该结果分配给 ngModel 表达式的原因
  • 双向绑定 [(NgModel)] 需要一个“变量”[(ngModel)]="variable"(你说如果变量是真/假,则检查或不检查,如果你检查/取消检查,则为变量)如果只需要单向绑定,则只能使用 [ngModel]="bellNotification.status==='READ'"

标签: angular angular-material


【解决方案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

【讨论】:

  • 你也可以使用[ngModel]
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-07-09
  • 1970-01-01
  • 2014-12-16
  • 2019-01-14
  • 1970-01-01
相关资源
最近更新 更多