Используйте перечисление TypeScript в качестве имени переменной шаблона Angular с помощью ngTemplateOutlet

Question

Я смотрел на такие вопросы, как этот. Но это не совсем отвечает на мой вопрос. Я хочу связать имя локальной переменной со значением перечисления, как в следующем (сильно упрощенном) примере:

В certain-state.component.ts:

export enum CertainState {
    VALID,
    INVALID
}

export class CertainStateComponent {
    // holder for the current state
    public state: CertainState;

    // store the actual enum in the instance of the class so that
    // it is available in the template
    public certainStates: typeof CertainState = CertainState;

    // below is the logic which sets the state
    ...
}

В certain-state.component.html:

<ng-container *ngTemplateOutlet="state_{{state}}"></ng-container>

// obviously this is invalid syntax but I want to demonstrate my intention
<ng-template #state_{{certainStates.VALID}}><span>VALID</span></ng-template>
<ng-template #state_{{certainStates.INVALID}}><span>INVALID</span></ng-template>

РЕДАКТИРОВАТЬ: Я думаю, что решение заключается в следующем ответе: Как использовать значение перечисления машинопись в выражении Angular2 ngSwitch. Что, вы парни, думаете?

Answer 1

Это то, что CertainState enum действительно есть:

(function (CertainState) {
    CertainState[CertainState["VALID"] = 0] = "VALID";
    CertainState[CertainState["INVALID"] = 1] = "INVALID";
})(CertainState = exports.CertainState || (exports.CertainState = {}));

Он в основном сопоставляет ключи с индексами и наоборот.

Таким образом, это должно быть напечатано как:

public state: number;
public certainStates: typeof CertainState = CertainState;

И если предполагается использовать имя состояния, его можно найти в enum:

<ng-container *ngTemplateOutlet="state_{{certainStates[state]}}"></ng-container>
<ng-template #state_{{certainStates[certainStates.VALID]}}><span>VALID</span></ng-template>

Или enum index можно использовать напрямую:

<ng-container *ngTemplateOutlet="state_{{state}}"></ng-container>
<ng-template #state_{{certainStates.VALID}}><span>VALID</span></ng-template>

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

Answer 2

public certainStates: typeof CertainState = CertainState;

должно быть

public certainStates: any = CertainState;

или же

public certainStates: {[s: number]: string } = CertainState;