Angular的循环模板可以通过枚举循环吗？ [英] Can Angular's template for loop loop through an enum?

问题描述

我正在审核用于选择过滤器组件的模型的代码为 Todo s：

    export enum VISIBILITY_FILTER {
      SHOW_COMPLETED = 'SHOW_COMPLETED',
      SHOW_ACTIVE = 'SHOW_ACTIVE',
      SHOW_ALL = 'SHOW_ALL'
    }

    export type TodoFilter = {
      label: string;
      value: VISIBILITY_FILTER;
    };

    export const initialFilters: TodoFilter[] = [
      { label: 'All', value: VISIBILITY_FILTER.SHOW_ALL },
      { label: 'Completed', value: VISIBILITY_FILTER.SHOW_COMPLETED },
      { label: 'Active', value: VISIBILITY_FILTER.SHOW_ACTIVE }
    ];

看起来所有这些都可以替换为：

It looks as if all of that could be replaced with:

export enum VISIBILITY_FILTER {
  SHOW_COMPLETED = 'Completed',
  SHOW_ACTIVE = 'Active',
  SHOW_ALL = 'All'
}

所以有效过滤属性只需要通过枚举 VISIBILITY_FILTER 输入，我们就会在模板中循环然后枚举这样的（伪代码）：

So the active filter property would just be typed by the enum VISIBILITY_FILTER and we would loop through then enum in the template like this (Pseudo code):

    <option *ngFor="let filter of VISIBILITY_FILTER;" [ngValue]="filter">{{VISIBILITY_FILTER[VISIBILITY_FILTER.filter]}}
    </option>

这看起来合理还是我错过了什么？

Does that seem reasonable or did I miss something?

推荐答案

尝试：

public get visFilterValues() {
  return Object.keys(VISIBILITY_FILTER).map(k => VISIBILITY_FILTER[k]);
}

和

<option *ngFor="let filter of visFilterValues" [ngValue]="filter">{{filter}}</option>

这篇关于Angular的循环模板可以通过枚举循环吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！