angular - Angular5: การวนลูปผ่าน Enum โดยใช้ *ngFor

ฉันกำลังพยายามสร้างโครงสร้างบางอย่างที่มีคู่คีย์-ค่า โดยที่คีย์เป็นตัวระบุเช่น 'equals' และค่าคือค่า HTML ที่เท่ากับยูนิโค้ด เช่น '\u003D' ตอนนี้ฉันกำลังใช้ enum แต่ฉันไม่แน่ใจว่านี่เป็นโครงสร้างที่ดีที่สุดหรือไม่ อย่างไรก็ตาม ฉันจำเป็นต้องใช้ enum (หรือตัวโครงสร้างอื่น) นี้เพื่อแสดงอักขระยูนิโค้ดในแบบเลื่อนลงบนหน้าเว็บ โดยใช้คำสั่ง ngFor เพื่อวนซ้ำ enum ของฉันและสร้างตัวเลือกที่ innerHtml ตรงกับอักขระยูนิโค้ด วิธีที่ดีที่สุดในการทำเช่นนี้คืออะไร?

ตอนนี้โค้ดของฉันเป็นดังนี้:

enum

export enum Symbols {
  equals = '\u003D'
}

component.ts

symbols: Symbols;

component.html

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

คำตอบ #1

ในการทำให้ enum สามารถเข้าถึงได้ภายในคอมโพเนนต์ คุณต้องประกาศ property เหมือนที่คุณทำ แต่แทนที่จะประกาศชนิดเป็น type Symbols (โดยใช้ :) คุณควรกำหนดค่า Symbol ให้กับมัน (โดยใช้ =)

ในการประกาศ <select> พร้อมตัวเลือก คุณควรใช้ *ngFor ใน <option> ไม่ใช่ใน <select>

นอกจากนี้ เพื่อทำการวนซ้ำ enum คุณต้องใช้ 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;
}