ngFor 不打印对象数据答案

【问题标题】：ngFor doesn't print object datangFor 不打印对象数据
【发布时间】：2019-01-29 14:20:29
【问题描述】：

我从套接字接收到一个对象，我想使用 *ngFor 将其打印到屏幕上。我在控制台中收到以下错误 Error trying to diff 'asd'. Only arrays and iterables are allowed

角度 ts

ngOnInit() {
console.log('ngOnInit');
this.socket.on('online',(people:number)=>{
  console.log('online:',people);
})
this.socket.on('message',(data:any)=>{
  console.log('socket-emit:',data);
})
this.socket.on('msg',(data:any)=>{
  console.log(data);
  this.MessageList = data; 
  for(let key in data){
    this.MessageList.push(key);
  }
  // console.log(this.MessageList['name'] ,":",this.MessageList['message']);
})


}

角度html

  <div *ngIf="MessageList">
          <li *ngFor="let m of MessageList">
            <span>{{m}}</span>

          </li>
    </div>

【问题讨论】：

执行console.log(data)时是否看到控制台中的数据？
看起来你正在接收一个对象，而不是你应该得到一个对象数组。例如，你应该得到 [{message:"something", name : "abc"}, {message: "anotherthing", name: "pqr"}]

标签： angular

【解决方案1】：

首先将您的 MessageList 初始化为空数组

this.MessageList = [];

然后正如错误所说，ngFor 仅支持数组等可迭代对象。所以一旦你按下键它应该可以正常工作

【讨论】：

【解决方案2】：

当msg 套接字被调用时，它只传递一个消息对象而不是整个数组。

因此，您不应初始化 this.MessageList = data，因为它会将您的 MessageList 数组转换为对象，从而使其不可迭代。

要获取整个消息列表，您必须：

创建新的套接字事件，或者
更新现有的事件参数数据。

下面是反映这一点的sn-p；

this.socket.on('msg', (data:any) => {
    console.log(data);
    this.MessageList = data; 
    for(let key in data) {
        this.MessageList.push(key);
    }
    // console.log(this.MessageList['name'], ":" , this.MessageList['message']);
});

【讨论】：