1. ホーム
  2. html

[解決済み] Angular 8のHTMLテンプレートで*ngIfのEnumを使用する

2022-02-18 22:47:14

質問

Angular 8のテンプレートでEnumを使用するにはどうすればよいですか?

コンポーネント.ts

import { Component } from '@angular/core';
import { SomeEnum } from './global';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = SomeEnum.someValue;
}


コンポーネント.html

<span *ngIf="name === SomeEnum.someValue">This has some value</value>

これは、テンプレートが SomeEnum . どうすれば解決できますか?

ERROR Error: Cannot read property 'someValue' of undefined

解決方法は?

TSで

import { SomeEnum } from 'path-to-file';

public get SomeEnum() {
  return SomeEnum; 
}

をHTMLで使用します。

*ngIf="SomeEnum.someValue === 'abc'"


EDITです。 時間が経つにつれて、開発者としてより多くを学ぶことができます。私が今使っているアプローチでは get メソッドを使用します。 どちらのソリューションも機能しますので、お好きな方をお選びください。

TS内

import { SomeEnum } from 'path-to-file';

export class ClassName {
  readonly SomeEnum = SomeEnum;
}

をHTMLで使用します。

*ngIf="SomeEnum.someValue === 'abc'"