[英]Enums in TypeScript 2+ lost value when send from html
I have an object and enum defined like this: 我有一个这样定义的对象和枚举:
export interface Character {
name: string;
side: Side;
}
export enum Side {
All,
Light,
Dark
}
I am using this enum in my component: 我在组件中使用此枚举:
import { Component, OnInit } from '@angular/core';
import { Character, Side } from '../core';
@Component({
selector: 'app-tabs',
templateUrl: './tabs.component.html'
})
export class TabsComponent {
chosenList = Side.All; // initial value set to 0
characters = [
{ name: 'Luke Skywalker', side: Side.All }, // side is set to 0
{ name: 'Darth Vader', side: Side.All } // side is set to 0
];
onChoose(side: Side): void {
this.chosenList = side; // this line goes wrong set chosenList to string 'Side.All'
}
getCharacters(): Character[] {
if (this.chosenList === Side.All) {
return this.characters.slice();
}
return this.characters.filter((character) => {
return character.side === this.chosenList;
});
}
onSideChosen(charInfo: Character): void {
const pos = this.characters.findIndex((char) => {
return char.name === charInfo.name;
});
this.characters[pos].side = charInfo.side;
}
}
My html looks like this. 我的html看起来像这样。 The problem lies in (click) event.
问题出在(单击)事件。 I pass enum like this to my component unfortunately my component resolve it as string.
我将这样的枚举传递给我的组件,不幸的是我的组件将其解析为字符串。
<div id="tab-main" class="container">
<ul class="nav nav-tabs">
<li class="nav-item">
<a [ngClass]="{active: chosenList === 'Side.All'}" class="nav-link" (click)="onChoose('Side.All')" style="cursor: pointer">All</a>
</li>
<li class="nav-item">
<a [ngClass]="{active: chosenList === 'Side.Light'}" class="nav-link" (click)="onChoose('Side.Light')" style="cursor: pointer">Light</a>
</li>
<li class="nav-item">
<a [ngClass]="{active: chosenList === 'Side.Dark'}" class="nav-link" (click)="onChoose('Side.Dark')" style="cursor: pointer">Dark</a>
</li>
</ul>
<app-list [characters]="getCharacters()" (sideAssigned)="onSideChosen($event)"></app-list>
</div>
The problem is when I click on button "All button" this line of code is invoked 问题是,当我单击按钮“所有按钮”时,将调用此行代码
onChoose(side: Side): void {
this.chosenList = side; // this line goes wrong set chosenList to string 'Side.All'
}
however when I compare values like this 但是当我比较这样的价值
if (this.chosenList === Side.All)
it always return false because chosenList is not enum anymore but it's string. 它始终返回false,因为selectedList不再是枚举,而是字符串。
My question is how can I pass enum from .html file to .ts I know I can resolve this problem just by sending 0 / 1 / 2 within html however this way I am loosing readability... 我的问题是如何将枚举从.html文件传递给.ts我知道我可以通过在html中发送0/1/2来解决此问题,但是这样会使我失去可读性...
public Side = Side;
public Side = Side;
in the component "{active: chosenList === Side.All}"
"{active: chosenList === Side.All}"
The problem is basically that in templates you don't have access to stuff defined outside the component especially if it has to be transpiled first 问题基本上是,在模板中,您无权访问在组件外部定义的内容,尤其是如果必须先对其进行编译的话
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.