使用 ES6 Map 作为 angular material 复选框的输入会抛出解析错误

Question

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

Angular 版本 - 7 Angular material - 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 地图作为 angular material 复选框 checked/unchecked 状态，如下所示

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

但它抛出如下解析错误

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

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

Answer 1

属性 checked 的问题对于 mat-checkbox 不是 @output。它只是一个输入。所以你应该从中删除括号( )。

<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],
]);

使用 ES6 Map 作为 angular material 复选框的输入会抛出解析错误

Using ES6 Map as an input for angular material checkbox throws Parse errors

javascript

ecmascript-6

angular

angular-material-6