如何使用ngFor循环遍历Typescript枚举作为字符串数组？

18 浏览
0 Comments

如何使用ngFor循环遍历Typescript枚举作为字符串数组？

我正在使用Angular2和TypeScript，我有一个枚举：

export enum Role {
    ServiceAdmin, CompanyAdmin, Foreman, AgentForeman, 
    CrewMember, AgentCrewMember, Customer
}

我想使用*ngFor来遍历这个枚举。有没有更简单的方法，还是必须创建一个管道？

0

3 答案

0 Comments

问题的原因是ngFor只支持对可迭代对象（例如数组）进行绑定。而传入ngFor的是一个Typescript Enum，所以需要将Enum转换为一个数组来进行迭代。

解决方法是创建一个名为EnumToArrayPipe的管道，用于将Enum转换为一个数组。管道的代码如下：

export class EnumToArrayPipe implements PipeTransform {
  transform(value): Object {
    return Object.keys(value).filter(e => !isNaN(+e)).map(o => { return {index: +o, name: value[o]}});
  }
}

然后，在组件中引入并使用这个管道。具体代码如下：

import { EnumToArrayPipe } from './enum-to-array.pipe';
class MyComponent {
  roles = Role;
}


{{item.index}}: {{item.name}}

需要注意的是，使用管道时需要将Enum的名称转换为enum(s)ToArray。

如果在使用管道时遇到了错误，可能是因为这是一篇旧的回答，Angular的一些内容已经发生了变化。解决方法是创建一个模块，并将管道添加到模块的declarations中，然后将模块添加到需要使用管道的其他模块的imports中。

以上就是解决这个问题的原因和方法。

0
0 Comments

问题的原因是ngFor指令无法直接迭代枚举类型（enum）作为字符串数组进行输出。解决方法有两种。

第一种方法是在组件中创建一个keys方法，将枚举对象转换为字符串数组，并在模板中使用ngFor指令迭代输出。具体代码如下：

@Component({
  ...
  template: `
    

      {{ item }}
    
  
  `
})
export class YourComponent {
  enumObject = YourEnum;
  keys(): Array {
    const keys = Object.keys(this.enumObject);
    return keys.slice(keys.length / 2);
  }
}

第二种方法是创建一个自定义的管道（pipe），将枚举对象转换为字符串数组，并在模板中使用该管道。具体代码如下：

@Pipe({
  name: 'enumToArray'
})
export class EnumToArrayPipe implements PipeTransform {
  transform(data: Object) {
    const keys = Object.keys(data);
    return keys.slice(keys.length / 2);
  }
}

使用该管道的示例代码如下：


  {{ item }}

需要注意的是，在Angular 6中，可以直接使用`role = Object.keys(Role)`将枚举对象转换为字符串数组，无需再使用管道。

以上就是解决该问题的两种方法。

0
0 Comments

问题的出现原因：原问题是关于如何使用ngFor在Angular中迭代Typescript枚举作为字符串数组。问题的提出者想要在模板中使用ngFor指令来遍历枚举，并将枚举的键和值显示在视图中。然而，他们发现直接在模板中使用枚举会导致重复迭代，因为Angular会遍历枚举的键和值。

解决方法：问题的解决方法是使用Angular 6.1引入的"keyvalue"管道。通过在ngFor指令中使用该管道，我们可以将枚举作为键值对的数组进行迭代，并在视图中显示键和值。然而，该解决方法默认按字母顺序排序枚举的键值对，如果需要控制排序顺序，可以参考Stack Overflow上的解决方案。另外，需要注意的是，不能直接在模板中使用枚举，而是需要将枚举赋值给一个变量，然后在ngFor指令中使用该变量进行迭代。

以下是解决问题的代码示例：


  {{ enum.key }} - {{ enum.value}}

完整的示例代码可以在StackBlitz上查看：

[https://stackblitz.com/edit/angular-gujg2e](https://stackblitz.com/edit/angular-gujg2e)

此外，为了避免重复迭代的问题，可以使用一个变通方法。在ngFor指令中，我们可以使用index变量来控制遍历的次数，并使用count变量来获取枚举的长度。通过将枚举的长度除以2，我们可以确保只迭代一半的次数。


  {{ enum.key }} - {{ enum.value}}

通过使用"keyvalue"管道和一些变通方法，我们可以在Angular中使用ngFor来迭代Typescript枚举作为字符串数组，并解决重复迭代的问题。

0