Angular 4 DataTable报错：NgFor仅支持数组等可迭代对象，求解决方案

这个错误的根源在于你初始化alarmsData的方式不对，加上后续赋值逻辑的小问题，导致DataTable组件无法正确处理数据。我来一步步帮你理清并解决：

问题分析 #

1. 你一开始就把alarmsData赋值为new DataTableResource(this.alarmsData)，这时候this.alarmsData还没有任何数据，是undefined，相当于给DataTableResource传了一个无效的初始值。
2. 当API返回正确的数组数据后，你直接把数组赋值给alarmsData，这就覆盖了之前创建的DataTableResource实例，导致组件期望的是DataTableResource对象，但拿到的却是普通数组，进而触发NgFor遍历非可迭代对象的错误。

修复方案 #

我们需要把原始数据存储和DataTableResource实例分开处理，确保只有在拿到有效数据后才初始化DataTable资源：

修改TypeScript代码

import { Component, OnInit } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {alarm} from "../shared/alarm.model";
import { DataTableResource } from 'angular-4-data-table';

@Component({
  selector: 'app-alarm-data-table',
  providers:[],
  templateUrl: './alarm-data-table.component.html',
  styleUrls: ['./alarm-data-table.component.css']
})
export class AlarmDataTableComponent implements OnInit {
  // 专门存储API返回的原始数组数据
  private alarms: alarm[] = [];
  // DataTable资源实例，初始为空
  alarmsData: DataTableResource<alarm> | undefined;
  alarmCount: number = 0;

  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get<alarm[]>('http:my api ')
      .subscribe(
        data => {
          this.alarms = data;
          this.alarmCount = data.length;
          // 拿到有效数据后再初始化DataTableResource
          this.alarmsData = new DataTableResource(this.alarms);
        },
        error2 => {
          console.log('Error has occured');
        }
      );
  }
}

优化HTML模板

为了避免数据加载完成前组件尝试渲染导致的错误，给外层容器加上*ngIf="alarmsData"，确保只有当资源实例存在时才渲染DataTable：

<div *ngIf="alarmsData">
  <data-table [resource]="alarmsData" [count]="alarmCount">
    <!-- 你的列定义 -->
    <data-table-column [property]="'naturalId'" [header]="'Natural'" [sortable]="true" [resizable]="true">
    </data-table-column>
  </data-table>
</div>

这样修改后，DataTable就能正确接收到初始化好的资源实例，也能正常遍历API返回的数组数据了。

内容的提问来源于stack exchange，提问作者zara amani