Angular 5 : Iterate Over Enum Using *ngFor

Question

我正在尝试制作某种具有键值对的结构，其中键是一个标识符，如“equals”，值是 unicode 等效 html，如“\u003D”。现在我正在使用枚举，但我不确定这是否是最好的结构。无论如何，我需要使用此枚举(或其他结构)通过使用 ngFor 语句迭代我的枚举并制作与 unicode 字符对应的 innerHtml 选项来在页面的下拉列表中显示 unicode 字符。做这个的最好方式是什么？

现在我的代码如下:

枚举

export enum Symbols {
  equals = '\u003D'
}

component.ts

symbols: Symbols;

component.html

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

Answer 1

要在组件内访问枚举，您必须像以前一样声明一个属性，但不是声明它的类型 Symbols (使用 : )，你应该分配 Symbol到它(使用 = )。

声明一个<select>对于选项，您应该使用 *ngFor在<option> s，不在 <select> 中.

此外，要迭代枚举，您必须使用 Object.keys(symbols) , 别名为 keys(symbol)在下面的模板中。

Stackblitz Demo here.

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;
}