[已解决]无法从数据数组中获取数据。问题是什么？

Question

我的服务代码：

export class RecordService {

  constructor() { }

  getData(){
    return [
      {
        name : "Mim",
        online : true
      },
      {
        name : "ABC",
        online : false
      },
      {
        name : "XYZ",
        online : true
      },
      {
        name : "ABC",
        online : false
      },
      {
        name : "XYZ",
        online : true
      }
    ]
     
  }
}

app.component.ts 代码：

export class AppComponent {
  // text = 'intro2angular'
  data = {}

  constructor(private myFirstService : RecordService){

  }
  
  ngOninit(){
    this.data = this.myFirstService.getData()
  } 

我的 app.component.html 代码：

<table>
  <tr>
    <td>S.no</td>
    <td>name</td>
    <td>isonline</td></tr>
  <tr *ngFor="let record of data; let i = index; let firstRecord = first; let lastRecord = last; let evenrecord = even; let oddrecord = odd" [ngClass]="{odd: oddrecord, even: evenrecord, first:firstRecord, last:lastRecord}">
    <td>{{i + 1}}</td>
    <td>{{record.name}}</td>
    <td>{{record.online}}</td>
  </tr>
</table>

无法从数据数组中获取数据。给出错误错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays。有什么问题？

另一个错误给出： 错误上下文 DebugContext_ {view: {…}, nodeIndex: 10, nodeDef: {…}, elDef: {…}, elView: {…}}。有什么问题？

Answer 1

将data 初始化为空数组而不是空对象。

export class AppComponent {
  data = [];        // <-- array here

  constructor(private myFirstService : RecordService) { }

  ngOninit() {
    this.data = this.myFirstService.getData();
  }
  
  ...
}

当组件被渲染时，在ngOnInit被触发之前，data变量持有一个空对象而不是一个数组。 *ngFor 指令默认不能循环对象。

更新

工作示例：Stackblitz