无法读取组件处未定义的属性“接受”答案

【问题标题】：Cannot read property 'ACCEPTED' of undefined at Component无法读取组件处未定义的属性“接受”
【发布时间】：2021-08-05 19:54:50
【问题描述】：

我声明了一个常量

export class FriendRequest {
  constructor(){
  }
}

export const  FRIEND_REQUEST_STATUSES = {
  ACCEPTED : "acc",
  WAITING :"wait",
  DECLINED : "dec"   
};

我在组件中导入并调用了这个常量

组件.ts

import { FriendRequest,FRIEND_REQUEST_STATUSES} from './../../models/friend-request';

component.html

 <ion-button (click)='updateFriendRequestStatus(friendRequest.id,FRIEND_REQUEST_STATUSES.ACCEPTED)'>

错误：

错误类型错误：无法读取未定义的属性“接受” 在 FriendRequestsModalComponent_ion_item_10_Template_ion_button_click_7_listener

【问题讨论】：

stackoverflow.com/questions/40237561/…
@R.Richards 我尝试了完全相同的解决方案，但它不起作用
然后在您的帖子中显示该代码。

标签： angular typescript

【解决方案1】：

在 Angular 中，模板只能访问组件实例上的属性/方法。由于您的枚举不在组件实例上，因此您会收到此错误。

为了使它起作用，您需要将枚举设置为组件类的属性之一。

在您导入此枚举的组件中，定义一个像这样的变量

public readonly FRIEND_STATUS = FRIEND_REQUEST_STATUSES;

现在，您可以在模板中通过 FRIEND_STATUS 访问此枚举，如下所示：

 <ion-button (click)='updateFriendRequestStatus(friendRequest.id,FRIEND_STATUS.ACCEPTED)'>

【讨论】：

感谢您的回答@Ritesh，我没有其他方法可以在不声明另一个变量的情况下访问 HTML 中的 const 吗？
Angular 模板中的 @yassinegharsallah 只能访问组件实例 (this) 中可用的属性/方法。您无法访问模板中组件中定义的 const 变量。