如何以角度修复不可迭代的对象？答案

【问题标题】：How to fix non iterable object in angular?如何以角度修复不可迭代的对象？
【发布时间】：2019-04-30 10:31:17
【问题描述】：

我正在尝试使用 webHdfs rest API 以在 Angular 7 应用程序中获取 Hadoop 集群中的目录列表

我创建了服务

  public getHadoopDirList(): Observable<FileStatus[]> {
  return this.http.get<FileStatus[]>(this.webHdfsUrl, {}).pipe(map(data => data));
  }

我是这样订阅的

  loadHadoopDirList() {
   return this.restApi.getHadoopDirList().subscribe((data) => {
   this.hadoopDirList = data;
   console.log(data);
   }, error => {
    console.log(error);
   }
   );
   }

这是我用来解析 json 的类：

export class FileStatus {
accessTime: number;
blockSize: number;
childNum: number;
fileId: number;
group: string;
length: number;
modificationTime: number;
owner: string;
pathSuffix: string;
permission: string;
replication: number;
storagePolicy: number;
type: string;
}

这里是来自 json 响应的图片

当我尝试迭代它显示的结果时 ERROR 错误：尝试比较“[object Object]”时出错。只允许使用数组和可迭代对象

【问题讨论】：

请在您循环的地方显示您的模板代码
- {{hadoopDir.pathSuffix}}
不应该是<ul> <li *ngFor="let hadoopDir of hadoopDirList.fileStatus" >{{hadoopDir.pathSuffix}}</li> </ul>
错误未显示，但 HTML 上没有显示任何内容
输入：try:*ngFor="let hadoopDir of hadoopDirList.FileStatus"

标签： json angular rest

【解决方案1】：

在您的模板中编写循环，例如：

<ul>
   <li *ngFor="let hadoopDir of hadoopDirList?.FileStatuses?.FileStatus" >{{hadoopDir.pathSuffix}</li> 
</ul>

【讨论】：