NgFor не печатает данные объекта

Я получаю объект из сокета, который хочу вывести на экран с помощью *ngFor. Я получаю ошибку ниже в консоли Ошибка при попытке сравнить asd. Разрешены только массивы и итерации

угловой тс

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>

216

Angular66843 вопроса

Ответы:

Сначала инициализируйте свой MessageList для пустого массива

this.MessageList = [];

тогда, как говорит ошибка, ngFor поддерживает только итерации, такие как массивы. так что как только вы нажмете клавишу, все должно работать нормально

Когда вызывается сокет msg, он передает только один объект сообщения вместо всего массива.

Таким образом, вы не должны инициализировать свой this.MessageList = data, поскольку он преобразует ваш массив MessageList в объект, тем самым делая его неитерируемым.

Чтобы получить весь список сообщений, вам нужно:

создать новое событие сокета или
обновить существующие данные параметра события.

Ниже приведен фрагмент, отражающий это;

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']);
});

NgFor не печатает данные объекта

Ответы:

Интересные вопросы для изучения