Угловой как я могу использовать *ngFor с асинхронным каналом?

#html #angular #typescript #asynchronous

#HTML #угловой #машинописный текст #асинхронный

Вопрос:

Привет, у меня возникли проблемы с использованием асинхронного ngFor, у меня есть простейший пример этого, массив объектов,который получен с сервера OnInit, и я хочу повторить int, как только он поступит, вот как я написал это в шаблоне:

 lt;p *ngFor="let msg of messages | async"gt;testlt;/pgt;

Я имею в виду, что для меня это выглядит нормально, но, по-видимому, нет, вот часть ts:

 export class ChatComponent implements OnInit {  url = 'http://localhost:8080';  otherUser?: User;  thisUser: User = JSON.parse(sessionStorage.getItem('user')!);  channelName?: string;  socket?: WebSocket;  stompClient?: Stomp.Client;  newMessage = new FormControl('');  messages?: Observablelt;Arraylt;Messaggiogt;gt;;   constructor(  private route: ActivatedRoute,  private userService: UserService,  private http:HttpClient  ) {}   ngOnInit(): void {  this.userService  .getUserByNickname(this.route.snapshot.paramMap.get('user')!)  .subscribe((data) =gt; {  this.otherUser = data;  this.otherUser.propic = "data:image/jpeg;base64,"  this.otherUser.propic;  this.connectToChat();  });  }   connectToChat() {  const id1 = this.thisUser.id!;  const nick1 = this.thisUser.nickname;  const id2 = this.otherUser?.id!;  const nick2 = this.otherUser?.nickname!;   if (id1 gt; id2) {  this.channelName = nick1   'amp;'   nick2;  } else {  this.channelName = nick2   'amp;'   nick1;  }  this.loadChat();  console.log('connecting to chat...');  this.socket = new SockJS(this.url   '/chat');  this.stompClient = Stomp.over(this.socket);   this.stompClient.connect({}, (frame) =gt; {  //func = what to do when connection is established  console.log('connected to: '   frame);  this.stompClient!.subscribe(  '/topic/messages/'   this.channelName,  (response) =gt; {  //func = what to do when client receives data (messages)  let data:Messaggio = JSON.parse(response.body);  console.log(data);  //this.messages.push(data);  //this.messages = this.messages.slice();  }  );  });  }    loadChat(){  let messages: Arraylt;Messaggiogt;;  this.http.postlt;Arraylt;Messaggiogt;gt;(this.url '/getMessages' , this.channelName).subscribe(data =gt;{  messages = data;  console.log(messages);  })  }

раздел, касающийся этого вопроса, — это метод loadChat, который вызывается в методе, вызываемом в OnInit, поэтому в основном он вызывается в on init, и объявление массива

дело в том, что массив определяется, я даже печатаю его на консоли, но html-страница этого не делает

1. Переменная сообщения внутри loadChat не видна шаблону. Вы должны сделать this.messages = data

2. @ShamPooSham, черт возьми,я такой глупый, был еще один локальный массив, потому что изначально я делал что-то другое и забыл его удалить, кстати, это.сообщения = данные не работают, потому что данные типа Массивlt;Messagiogt; не наблюдаемый, я думаю, есть какой-то простой способ сделать приведение к наблюдаемому, но я просто сделал это.сообщения = это. yaddayaddahttpcall();

3. @santocielo99 в этом случае используйте Тему вместо Наблюдаемой, так как вы можете позвонить Subject.next(this.messages) и достичь своей цели

4. Да, лучше не подписываться и фактически назначить наблюдаемое, возвращенное из http-вызова, this.message

Ответ №1:

Убедитесь, что объект сообщения имеет вид Наблюдаемый. и добавьте нулевую проверку перед циклическим переходом по ней с помощью ngIf, как только у вас будут наблюдаемые сообщения с некоторыми данными, этот приведенный ниже код будет работать нормально

 lt;div *ngIf="(messages | async)"gt;  lt;p *ngFor="let msg of messages | async"gt;testlt;/pgt;   lt;/divgt;

Ответ №2:

Спасибо тем, кто все еще отвечает на этот вопрос, но я решил его с первого комментария, и проблема заключалась в следующем: я глуп и назначил данные с сервера в массив, локальный для метода, а не для свойства компонента, если бы я это сделал, это сработало бы с самого начала.

lmao