如何在角度4中使用* ngFor循环多维对象

Question

我尝试在我的html中使用*ngFor循环该对象。

<tr *ngFor="let artikel of artikels">

</tr>

但是这给了我错误

有人可以帮助我如何循环这个对象吗？

我也是棱角分明的新人..谢谢！

Answer 1

你不能用* ngFor迭代对象，因为错误说你需要使用像数据结构这样的数组。

最好的解决方案是使用带有* ngFor的管道将对象转换为数组。

尝试将此管道添加到util的模块中：

@Pipe({name: 'objectToArray'})
export class objectToArray implements PipeTransform {
  transform(value, args:string[]) : any {
    let keys = [];
    for (let key in value) {
      keys.push(key);
    }
    return keys;
  }

将管道导入模块，并将其与* ngFor

一起使用

<tr *ngFor="let articleKey of article|objectToArray">

</tr>

现在您可以使用'articleKey'并使用它来遍历嵌套数组：

<tr *ngFor="let articleKey of article|objectToArray">
   <td *ngFor="let article of article[articleKey]">
       <!--your template-->
   </td>
</tr>