Question

我从套接字收到一个对象，我想使用* 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>

Answer 1

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

this.MessageList = [];

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

Answer 2

调用$last_inserted_id=SELECT LAST_INSERT_ID();套接字时，它仅传递单个消息对象，而不传递整个数组。

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

要获取整个邮件列表，您必须：

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

以下是反映这一点的代码段；

MessageList

ngFor不打印对象数据

2 个答案: