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

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

В 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>

EDIT: я думаю, что решение находится в следующем ответе: Как использовать значение перечисления машинописного текста в операторе Angular2 ngSwitch. Ребята, что вы думаете?


angular enums angular2-template ng-template ng-container
person Tom    schedule 11.09.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вот чем на самом деле является 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;

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

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

Или индекс перечисления можно использовать напрямую:

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

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

person Estus Flask    schedule 11.09.2017

arrow_upward
0
arrow_downward 

public certainStates: typeof CertainState = CertainState;

должно быть

public certainStates: any = CertainState;

or

public certainStates: {[s: number]: string } = CertainState;
person Günter Zöchbauer    schedule 11.09.2017
comment
Ваше решение выдает тип «typeof CertainState», который не может быть назначен типу «CertainState». - person Tom; 11.09.2017
comment
Я обновил свой ответ. См. также stackoverflow.com/a/30785209/217408. - person Günter Zöchbauer; 11.09.2017
comment
Почему так? typeof CertainState является допустимым типом и должен работать должным образом. - person Estus Flask; 11.09.2017
comment
Кажется, передается как объект, а не как тип присваивания. - person Günter Zöchbauer; 11.09.2017