使用ES6贴图作为角度材料复选框的输入会引发解析错误

Question

我正在尝试在组件和模板中使用Enum定义，

角度版本-7 角材料-7

我定义了以下枚举，

export enum Status {
  NEW = 1,
  IN_PROGRESS,
  COMPLETED
}

下面是简化的组件代码

// Component definitions ignored here

public statusOptions = Status;
public statusFilters: Map<Status, boolean> = new Map([
  [Status.NEW, true],
  [Status.IN_PROGRESS, true],
  [Status.COMPLETED, false],
]);

我正在尝试将模板中的statusFilters地图用于角材料复选框的选中/未选中状态

<mat-checkbox
  [(checked)]="statusFilters.get(statusOptions.NEW)"
  (change)="onStatusChange(statusOptions.NEW, $event)"
  [disabled]="isDisabled('new')"
  >New</mat-checkbox>

但是它会引发如下解析错误

任何人都可以让我知道我做错了什么以及如何通过材质复选框正确使用地图吗？

如果您需要任何其他详细信息，请告诉我，请原谅我将错误发布为屏幕截图而不是文本，我无法从tmux + zsh终端设置中进行复制。

Answer 1

问题为checked的属性@output不是mat-checkbox。它只是一个输入。因此，您应该从中删除括号( )。

<mat-checkbox
  [checked]="statusFilters.get(statusOptions.NEW)"
  (change)="onStatusChange(statusOptions.NEW, $event)"
  [disabled]="isDisabled('new')"
  >New</mat-checkbox>

请参阅此api-https://material.angular.io/components/checkbox/api

工作副本在这里-https://stackblitz.com/edit/material-design-angular-checkbox-wqgvqg

Answer 2

您要查找文本而不是整数。

public statusFilters: Map<Status, boolean> = new Map([
  [Status[Status.NEW], true],
  [Status[Status.IN_PROGRESS], true],
  [Status[Status.COMPLETED], false],
]);