Angular5：使用 *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

要在组件内访问枚举，您必须像以前一样声明一个属性，而不是将其声明为 type Symbols （使用:），你应该给它分配Symbol（使用=）。

要声明带有选项的 <select>，您应该在 <option> 中使用 *ngFor，而不是在 <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;
}

Angular5：使用 *ngFor 迭代枚举

Angular5: Iterate Over Enum Using *ngFor

enums

typescript

ngfor

angular