Angular5：使用*ngFor迭代枚举

Question

我正在尝试创建一个结构，其中包含键值对，其中键是类似于“equals”的标识符，而值是Unicode等效的HTML，如“\u003D”。目前我正在使用枚举，但我不确定这是否是最佳结构。无论如何，我需要使用此枚举（或其他结构）通过使用ngFor语句迭代我的枚举并创建选项，其innerHtml对应于Unicode字符，在页面上显示Unicode字符的下拉菜单。最好的方法是什么？

现在我的代码如下所示： 枚举

export enum Symbols {
  equals = '\u003D'
}

component.ts

symbols: Symbols;

component.html

<select *ngFor="let symbol of symbols">
     <option value="and">{{symbol}}</option>
</select>

- FrankTheTank

---

我已经从这个问题中删除了代码片段，因为它们不是可运行的JavaScript代码。 - Zze

如果你知道 TypeScript 枚举在 JavaScript 中是如何转换的，那么你就不会想要在 ngFor 中使用它。你可以编写一个自定义管道来使枚举显示适用，并在 ngFor 内部使用它来处理你的枚举。 - Trash Can

Answer 1

为了让枚举在组件中可访问，您必须声明一个属性，就像您所做的那样，但是不要声明其为类型Symbols(使用:)，而应该将其指定为Symbol(使用=)。

要声明具有选项的<select>，您应在<option>中使用*ngFor，而不是在<select>中使用。

此外，要遍历枚举，您必须使用Object.keys(symbols)，它在以下模板中由keys(symbol)别名。

在这里查看Stackblitz演示。

import { Component } from '@angular/core';

export enum Symbols {
  equals = '\u003D',
  notEquals = '!='
}

@Component({
  selector: 'my-app',
  template: `
    <p>
      Having the name as label and symbol as value:
      <select>
        <option *ngFor="let symbol of keys(symbols)" [ngValue]="symbols[symbol]">{{symbol}}</option>
      </select>
    </p>
    <p>
      Having the symbol as label and name as value:
      <select>
        <option *ngFor="let symbol of keys(symbols)" [ngValue]="symbol">{{symbols[symbol]}}</option>
      </select>
    </p>
  `
})
export class AppComponent  {
  keys = Object.keys;
  symbols = Symbols;
}

- acdcjunior

---

在Angular5中，这将显示字符串和相应的数字，使用keys()：Array<string> { var keys = Object.keys(this.role); return keys.slice(keys.length / 2); } - sensei

对于那些没有将值显式分配给枚举的人来说，这是一个必要的要点，这将显示双重项目（一个用于值，另一个用于文本）。 - NitinSingh

Answer 2

你也可以使用keyvalue管道，它会让你的生活更轻松。

<p *ngFor="let enum of TestEnum | keyvalue">
  {{ enum.key }} - {{ enum.value}}
</p>

- Stanza Arrow