在 Angular 模板中使用元组类型答案

【问题标题】：Using tuple type in Angular template在 Angular 模板中使用元组类型
【发布时间】：2020-07-17 11:50:47
【问题描述】：

如何在角度模板中使用元组类型？我在控制器中声明了两个属性：

export enum DisplayMode1 {
    Edit = 'Edit',
    Decided = 'Decided',
    PartsRequested = 'PartsRequested'
};
export enum DisplayMode2 {
    Edit = 'Edit',
    Submitted = 'Submitted',
    Returned = 'Returned'
};

displayMode: [
    DisplayMode1,
    DisplayMode2,
  ];
DisplayModes = [
    DisplayMode1,
    DisplayMode2,
  ];

<h3
      *ngIf="            
        displayMode !== [DisplayModes[0].Decided, DisplayModes[1].Submitted]
      "
    >

当我尝试在模板中使用它们时，出现构建错误：

“typeof DisplayMode1 | 类型”上不存在“已提交”属性类型的 DisplayMode2'。类型“typeof DisplayMode1”上不存在属性“已提交”。

218 displayMode !== [DisplayModes[0].Decided, DisplayModes[1].Submitted]

但是，如果我在模板中使用 DisplayModes[].Edit，这对于两种显示模式都很常见。

【问题讨论】：

标签： angular templates tuples

【解决方案1】：

DisplayModes = [
    DisplayMode1,
    DisplayMode2,
  ] as const; // will fix your main error

我注意到的另一个问题是displayMode !== [DisplayModes[0].Decided, DisplayModes[1].Submitted]。它永远不会起作用，因为数组是通过引用进行比较的。所以你需要做类似displayMode[0] !== DisplayModes[0].Decided && displayMode[1] !== DisplayModes[1].Submitted

【讨论】：

【解决方案2】：

Demo U 已定义，但您没有在页面初始化时进行初始化。您应该控制是否存在 if 条件。你不能像那样比较元组。您应该一对一地检查每个项目。

<h3 *ngIf="displayMode && DisplayModes && !(displayMode[0] == DisplayModes[0] && displayMode[1]==DisplayModes[1])"></h3>

【讨论】：