Angular中*ngFor搭配Async管道使用方法及页面无渲染问题排查

• 你声明的类属性messages为Observable类型，但从未对它赋值，模板中async管道始终订阅空值，因此没有渲染内容。你在loadChat方法中声明的局部变量messages和类属性是完全独立的两个变量，赋值仅在函数内部生效，不会触发视图更新。
• 现有逻辑没有对接WebSocket接收新消息的更新逻辑，即使历史消息渲染成功，后续收到的新消息也不会同步到视图。
• 额外存在一个逻辑错误：生成channelName的else分支错误写为nick2 + '&' + nick2，会导致双方生成的频道名不一致，无法正常收发消息。

推荐使用BehaviorSubject来处理消息流，既可以存储历史消息，也可以支持后续实时消息的推送更新：

1. 修改消息属性声明，替换原来的messages声明：

// 引入所需依赖
import { BehaviorSubject } from 'rxjs';

export class ChatComponent implements OnInit {
  // 替换原来的 messages?: Observable<Array<Messaggio>>; 声明
  private messagesSubject = new BehaviorSubject<Messaggio[]>([]);
  // 暴露为Observable供模板订阅
  messages$ = this.messagesSubject.asObservable();

  // 其余原有属性保持不变

2. 修改loadChat方法，将请求到的历史消息推送到Subject：

loadChat(){
  this.http.post<Array<Messaggio>>(this.url+'/getMessages' ,  this.channelName).subscribe(data =>{
    console.log(data);
    // 推送历史消息到流中
    this.messagesSubject.next(data);
  })
}

3. 补全WebSocket收到新消息的更新逻辑：

this.stompClient!.subscribe(
  '/topic/messages/' + this.channelName,
  (response) => {
    let data:Messaggio = JSON.parse(response.body);
    console.log(data);
    // 合并新消息到现有列表后推送
    const currentMsgs = this.messagesSubject.value;
    this.messagesSubject.next([...currentMsgs, data]);
  }
);

4. 修复频道名生成的错误：

if (id1 > id2) {
  this.channelName = nick1 + '&' + nick2;
} else {
  // 修正为nick2拼接nick1
  this.channelName = nick2 + '&' + nick1;
}

5. 修改模板绑定，替换原来的messages为messages$：

<p *ngFor="let msg of messages$ | async">test</p>

内容的提问来源于stack exchange，提问作者santocielo99