如何在 Angular html 中使用枚举数据类型？ [复制]

Posted 2023-03-05

【中文标题】如何在 Angular html 中使用枚举数据类型？ [复制]

【英文标题】：How to use enum data type in angular html? [duplicate]

【发布时间】：2021-07-27 19:46:34

【问题描述】：

在我的 .ts 文件中，我创建了一个这样的枚举数据类型：

export enum UploadORCompareHash 
  UPLOAD,
  COMPARE_HASH

@Component(
  selector: 'attachmentList',
  templateUrl: './attachment-list.component.html',
  // styleUrls: ['./attachment-list.component.css']
)
export class AttachmentListComponent implements OnInit, OnDestroy, OnChanges 

    public uploadOrCompareHash: UploadORCompareHash;

现在我想在我的 html 中使用它，如下所示：

<button *ngIf="uploadOrCompareHash === UploadORCompareHash.COMPARE_HASH" (click)="onConfirmUpload()" class="btn btn-primary"> compare hash
            </button>


<button *ngIf="uploadOrCompareHash === UploadORCompareHash.UPLOAD" (click)="onConfirmUpload()" class="btn btn-primary"> Upload
            </button>

但不幸的是，我不能使用它。我收到此错误：

Property 'UploadORCompareHash' does not exist on type 'AttachmentListComponent'.

谁能告诉我我在这里做错了什么？

【问题讨论】：

你到底想要什么？

组件中的uploadOrCompareHash值在哪里赋值？

【参考方案1】：

你需要在类的成员中转Enum，像这样：

export enum UploadORCompareHash 
  UPLOAD,
  COMPARE_HASH

@Component(
  selector: 'attachmentList',
  templateUrl: './attachment-list.component.html',
  // styleUrls: ['./attachment-list.component.css']
)
export class AttachmentListComponent implements OnInit, OnDestroy, OnChanges 

    public uploadOrCompareHash: UploadORCompareHash;
    
    get enumUpload()
      return UploadORCompareHash
    

<button *ngIf="uploadOrCompareHash === enumUpload.COMPARE_HASH" (click)="onConfirmUpload()" class="btn btn-primary"> compare hash
            </button>


<button *ngIf="uploadOrCompareHash === enumUpload.UPLOAD" (click)="onConfirmUpload()" class="btn btn-primary"> Upload
            </button>