Использование карты ES6 в качестве входных данных для углового материала приводит к возникновению ошибок анализа - PullRequest
0 голосов
/ 16 ноября 2018

Я пытаюсь использовать определение 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>

Но выдает ошибки разбора, как показано ниже

enter image description here

Может кто-нибудь сообщить мне, что я делаю неправильно и как я могу правильно использовать карту с флажком материала?

Пожалуйста, дайте мне знать, если вам требуются какие-либо дополнительные сведения, и простите, что я опубликовал ошибку в виде скриншота, а не в виде текста, я не смог скопировать его из настроек терминала tmux + zsh.

Ответы [ 2 ]

0 голосов
/ 16 ноября 2018

Вы ищете текст вместо целого числа.

public statusFilters: Map<Status, boolean> = new Map([
  [Status[Status.NEW], true],
  [Status[Status.IN_PROGRESS], true],
  [Status[Status.COMPLETED], false],
]);
0 голосов
/ 16 ноября 2018

Ошибка с атрибутом 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

...