Question

我在Ionic 3 Electron应用程序中使用Socket.io并且我有问题获得* ngFor重新绘制除非我调整窗口大小或滚动聊天我几乎尝试了每一个我可以在网上找到的修复并需要一个知识渊博的灵魂帮助我。

21:31:27.189 MediaRecorder.isTypeSupported('video/webm;codecs=vp8')
21:31:27.135 true
21:31:41.598 MediaRecorder.isTypeSupported('video/webm;codecs=vp8.0')
21:31:41.544 true
21:32:10.477 MediaRecorder.isTypeSupported('video/webm;codecs=vp9')
21:32:10.431 false
21:31:50.534 MediaRecorder.isTypeSupported('audio/ogg;codecs=opus')
21:31:50.479 true
21:31:59.198 MediaRecorder.isTypeSupported('audio/webm')
21:31:59.143 false

^这是我最近的尝试，所以它有点格式怪异和粗略

其中* ngFor是

的模板

getMessages() {
let observable = new Observable(observer => {
  this.socket.on('receive-board-message', (data) => {
    let message = {
      type: 'message',
      user: {
        id: data.from,
        displayName: this.chat.users[data.from].displayName,
        photo: this.chat.users[data.from].photo
      },
      content: data.message
    }
    this.chatMessages.push(message);
    observer.next(this.chatMessages);
  });
});
return observable;
}

this.getMessages().subscribe((data: any) => {
  this.chat.messages = data;
});

以及问题here

的视频

Answer 1

注意：要真正帮助解决这个问题，需要有更好的实际聊天实施环境。

因为调整大小＆＃34;帮助＆＃34;在这种情况下（并且通常调整大小会强制浏览器中的布局/重排） - 这很可能意味着数据存在。这只是Angular＆＃34;失败＆＃34;将其视为变更检测的一部分。

尝试使用异步管道直接订阅您的observable：

*ngFor="let message of (yourObservableVar$ | async); let i = index; let first = first;"

yourObservableVar是从你的函数中获取Observable的那个：

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `<div>{{ yourObservableVar$ | async }}</div>`
})
export class AppComponent {
  yourObservableVar$: Observable;

  constructor() {}

  getMessages() {
  let observable = new Observable(observer => {
    this.socket.on('receive-board-message', (data) => {
      let message = {
        type: 'message',
        user: {
          id: data.from,
          displayName: this.chat.users[data.from].displayName,
          photo: this.chat.users[data.from].photo
      },
       content: data.message
    }
      this.chatMessages.push(message);
      observer.next(this.chatMessages);
    });
  });
    this.yourObservableVar$ = observable;
  }
}

Answer 2

它可能不是最纯粹的选项，但您可以使用NgZone强制进行一些更改检测。我发现在Angular之外更新数据时可能需要这样做（Socket.io很可能会这样做）。

https://github.com/angular/angular/issues/5046

constructor(private zone: NgZone)  {}
...
this.getMessages().subscribe((data: any) => {
    this.zone.run(() => {
        this.chat.messages = data;
    });
});

离子* ng不更新尝试了一切

2 个答案: