Typescript Convert Object to Array - 因为 *ngFor 不支持对象的迭代

Posted 2023-03-13

【中文标题】Typescript Convert Object to Array - 因为 *ngFor 不支持对象的迭代

【英文标题】：Typescript Convert Object to Array - because *ngFor does not supports iteration of object

【发布时间】：2017-05-18 10:10:48

【问题描述】：

我不想像这样使用 for 循环将 Object 转换为 Array！如果将过程加倍并减慢应用程序的性能（我正在使用 Ionic2 和 Typescript，以及 Firebase）

for(输入数据) array.push(值);

是否有任何解决方案可以使用 *ngFor 迭代对象本身（如附图所示）。

或者我可以将此对象（如附图所示）转换为数组，以便可以在 *ngFor 中迭代。

【问题讨论】：

你可以为它创建一个自定义管道

如何为它创建自定义管道？

将 Farooq 的答案实现到自定义管道中，然后你就完成了

【参考方案1】：

标准库函数Object.entries 可以为您做到这一点。 Documentation

这是一个在函数中使用 Object.entries 的示例，将 (key -> A 类型的对象) 的对象转换为 A 类型的对象列表，其属性为 name，键作为该属性的值name属性：

function f<A>(input:  [s: string]: A ): (A & name: string)[] 
  return Object.entries(input)
    .map(a => 
      return name: a[0], ...a[1]
    )

【参考方案2】：

从 Angular 6 开始，现在有一个键值管道运算符。只需执行以下操作：

*ngFor="let item of objectList | keyvalue"

item.key # refers to the keys (134, 135...) in your example
item.value # refers to the object for each key

【讨论】：

完美！这应该是公认的答案。正是我需要弄清楚的。谢谢！

还要考虑这个的程序化版本； 1）在app.module中注册KeyValuePipe 2）注入构造函数private keyval: KeyValuePipe 3）像这样使用它let keyvalueData = this.keyval.transform(data);

【参考方案3】：

如果不需要索引，可以使用 Object.values(yourObject) 获取内部对象的数组。

【参考方案4】：

只需将响应数据放在方括号内并保存在类中即可。

this.servicename.get_or_post().subscribe(data=>
   this.objectList = [data]);

【讨论】：

这行不通，因为它将整个“列表”放入数组的第一个条目中，因此您会得到 [0:object1: ...,object2: ...]

【参考方案5】：

在管道上添加 toArray() 对我有用。

// Import toArray function
import  toArray  from 'rxjs/operators';

// Generic function to consume API
searchObjects(term: string): Observable<theObject[]> 
  requestUrl = this.url + term;
  return this.http.get<theObject[]>(requestUrl, httpOptions).pipe(
      // convert object to array
      toArray<theObject>()
  );

【参考方案6】：

您可以使用 Object.keys(obj) 来获取命名索引。这将返回一个数组结构，您可以进一步使用/自定义它。用于迭代对象值的示例可能如下所示

var persons =  
    john:  age: 23, year:2010,
    jack:  age: 22, year:2011,
    jenny:  age: 21, year:2012

获取迭代器

var resultArray = Object.keys(persons).map(function(personNamedIndex)
    let person = persons[personNamedIndex];
    // do something with person
    return person;
);

// you have resultArray having iterated objects 

【讨论】：

我不想循环播放！有什么解决方案可以直接在dom中循环吗？ （否则会执行双循环！）

好吧，我对 Ionic 了解不多，但是在 Angular 中，您可以在迭代器指令上使用“（键，值）in Person”，希望它有助于您对直接操作 DOM 的担忧避免循环。

(key, value) 在 Angular2 (Typescript - ES5) 中不起作用或对象的对象无法循环！我试过没有用;(

我创建了一个例子来说明它是如何工作的。希望对你有帮助codepen.io/farooqkhan/pen/mRbMZV

感谢法鲁克。 [ng-repeat="(key, value) in persons"] 在 Angular 中运行良好，但在使用 *ngFor 的 Angular2 中 [(key, value) in persons] 不起作用！ 'persons' 是对象的对象（不是数组） - 正如我在问题的附图中所示。