如何在Angular 8+ HTML模板中比较和访问enum变量？

Question

我为问题创建了stackblitz example，

我希望一次只能显示一种模式

• 绘图模式
• 缩放模式
• 点击模式

但是我无法进行比较，并且单击按钮时没有出现缩放模式

import { Component, Input, OnInit } from '@angular/core';

export enum Mode {
  DRAW,
  ZOOM,
  CLICK
}

@Component({
  selector: 'hello',
  template: `<h1>Hello {{name}}!</h1>
  <h1>Draw Mode</h1>
  <h1 *ngIf = "mode === Mode.ZOOM">Zoom Mode</h1>
  <h1>Click Mode</h1>

  <button (click)="setZoomMode()"> Zoom Mode</button>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent implements OnInit {
  @Input() name: string;
  mode: Mode;


  ngOnInit() {
    this.mode = Mode.CLICK;
  }
  setZoomMode() {
    this.mode = Mode.ZOOM;
  }


}