Как использовать enum в Angular - компилятор отображает ошибку "не существует"

Question

Я пытаюсь использовать enum в моем проекте, и компилятор отображает ошибку

Свойство 'name' не существует в 'компоненте таблицы'

Что я делаю не так?

Файл enum - я хочу преобразовать слова с сервера в иврит:

export enum CoursesNameEnum { 
  'חשבון דיפרנציאלי ואינטגרלי א' = 'HadvaA',
  'מבוא לסטטיסטיקה ולהסתברות למדעים' = 'introStatistics',
  'יסודות הפיזיקה' ='physics',
  'ניהול השיווק' ='marketing',
  'מבוא להנדסת תעשייה' = 'industrialEngineering',
  'סימולציה למהנדסי תעשייה' ='simultaionIndustrialEngineering',
  'בקרת איכות' = 'qualityControl',
  'ארגונומיה' ='ergonomics',
  'מערכות מידע תחרותיות אסטרטגיות' = 'informationSystem',
  'דיני חוזים' ='contractLaw',
  'דיני תאגידים' ='corporateLaw',
  'חשבון דיפרנציאלי ואינטגרלי ב'='HadvaB',
 }

.ts файл:

import { Component, OnInit } from '@angular/core';
import {CoursesListModel} from 'src/app/modules/general/courses.model';
import { UiService } from '../../ui.service';
import { MatTableDataSource } from '@angular/material/table';
import {CoursesNameEnum} from 'src/app/modules/general/courses.model';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  displayedColumns: string[] = ['wishlist','pay','points','name','number'];
  dataSource : MatTableDataSource<CoursesListModel>;
  data: CoursesListModel[];

  coursesNameEnum: CoursesNameEnum;

  constructor(private uiService:UiService) { }

  ngOnInit(): void {
      this.uploadData();
  }

  uploadData() {
      this.uiService.getData().subscribe((data)=>{
        this.data = data;
        this.dataSource = new MatTableDataSource<CoursesListModel>(this.data);
      });
  }
}

html file:

<div class="table-wrapper">
  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
    <ng-container matColumnDef="number">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> מספר קורס </th>
      <td mat-cell *matCellDef="let value"> {{value.number}} </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> שם קורס </th>
      <td mat-cell *matCellDef="let value"> {{coursesNameEnum[value[name]]}} </td>
    </ng-container>

    <ng-container matColumnDef="points">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> נקודות זיכוי </th>
      <td mat-cell *matCellDef="let value"> {{value.points}} </td>
    </ng-container>

    <ng-container matColumnDef="pay">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> הוסף קורס </th>
      <td mat-cell *matCellDef="let value"> <i class="material-icons" style="margin:0px 25px;">add</i></td>
    </ng-container>

    <ng-container matColumnDef="wishlist">
      <th mat-header-cell *matHeaderCellDef style="text-align: center;"> אהבתי </th>
      <td mat-cell *matCellDef="let value"> 
        <i class="material-icons" >favorite_border</i>
        <i class="material-icons" *ngIf="value.wishlist == true ? value.wishlist : '' ">favorite</i> 
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>

В столбце name я пытался использовать enum, но я получаю сообщение об ошибке, что "имя" не существует.

Спасибо

Answer 1

@ Merirav

Вы можете напрямую использовать переменную enum без создания новой глобальной переменной в определенном классе.

Ссылка: https://stackblitz.com/edit/angular-y8kahg?file=src%2Fapp%2Fapp.component.html