angular - Angular5: Iterere over enum ved å bruke *ngFor

Jeg prøver å lage en struktur av en slags som har nøkkel-verdi-par hvor nøkkelen er en identifikator som 'equals' og verdiene er det unicode-ekvivalente HTML som '\u003D'. Akkurat nå bruker jeg en enum, men jeg er ikke sikker på om dette er den beste strukturen. Uansett, jeg trenger å bruke denne enumen (eller en annen struktur) for å vise unicode-tegnene i en nedtrekksmeny på en side ved å bruke en ngFor-setning til å iterere over min enum og lage alternativer hvor innerHtml samsvarer med unicode-tegnet. Hva er den beste måten å gjøre dette på?

Akkurat nå er koden min som følger:

enum

export enum Symbols {
  equals = '\u003D'
}

component.ts

symbols: Symbols;

component.html

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

Svar #1

For å ha enumen tilgjengelig innenfor komponenten, må du erklære en egenskap, som du gjorde, men i stedet for å erklære den av type Symbols (ved å bruke :), bør du tilordne Symbol til den (ved å bruke =).

For å erklære en <select> med alternativer, bør du bruke *ngFor i <option>ene, ikke i <select>.

Også, for å iterere over enumen, må du bruke Object.keys(symbols), som er aliasert av keys(symbol) i malen under.

Stackblitz-demo her.

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