#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;
Комментарии:
1. уже решил эту проблему, я только что опубликовал свой собственный ответ, tnx tho
Ответ №2:
Спасибо тем, кто все еще отвечает на этот вопрос, но я решил его с первого комментария, и проблема заключалась в следующем: я глуп и назначил данные с сервера в массив, локальный для метода, а не для свойства компонента, если бы я это сделал, это сработало бы с самого начала.
lmao