Угловой асинхронный канал не работает для обновления источника изображения
в этом компоненте Angular я получаю наблюдаемый объект пользователя, я пытаюсь проверить в NgInit, определен ли URL-адрес изображения профиля. Если нет, я хочу установить для этого заполнитель. Но по какой-то причине изменение, которое я делаю в ngOnInit, уже слишком поздно. Источник изображения не установлен должным образом, поэтому в результате отображается альтернативный текст. Я думал, что асинхронный канал поможет мне получить изображение всякий раз, когда оно будет установлено заново? Может ли кто-нибудь помочь мне лучше понять этот контекст? :)
@Input()
user$: Observable<UserProfileData>;
userSub: Subscription;
constructor() { }
ngOnDestroy(): void {
this.userSub.unsubscribe();
}
ngOnInit(): void {
this.userSub = this.user$.subscribe(user=> {
user.profilePictureUrl = (user.profilePictureUrl) ? user.profilePictureUrl : '/assets/placeholder.png';
}
)
}
А в HTML я просто вызываю изображение профиля пользователя с помощью асинхронного канала.
<img class = "ml-lg-5 mb-2 mb-md-0 mx-auto rounded-circle" src = "{{(user$|async).profilePictureUrl}}" alt = "{{ (user$|async).username }}">
Вот что я получаю за user$, это от объекта UserProfileData:
description: "My name is Steve, I look forward to collaborating with you guys!"
firstname: "Steve"
lastname: "Mustermann"
location: LocationModel {country: "Germany", city: "Hamburg", zipcode: "22145"}
occupation: "Barber"
profilePictureUrl: ""
score: "69.1"
username: "steve669"
есть ли способ подписаться только в одном месте? Не стесняйтесь поделиться своим подходом со мной :)
Ага. Вы можете сделать это в любом из мест, а не в обоих.
Также можете поделиться, что user$ возвращает после подписки?
если я хочу подписаться только на компонент, как мне объявить его в шаблоне?
description: «Меня зовут Стив, я с нетерпением жду возможности сотрудничать с вами, ребята!» имя: "Стив" фамилия: "Энгель" местоположение: LocationModel {страна: "Германия", город: "Гамбург", почтовый индекс: "22145"} профессия: "парикмахер" profilePictureUrl: "" оценка: "69,1" имя пользователя: "steve669 "
это то, что возвращается перед обновлением значения в рамках подписки
Это не похоже на действительный json. Не могли бы вы отформатировать его и вставить? Кроме того, вы можете подписаться на компонент и сохранить его в переменной. Затем в шаблоне вы можете прочитать эту переменную, как только она будет готова.
Как только вы поделитесь json надлежащим образом, я покажу вам оба способа, а затем вы сможете решить, какой из них использовать :-)
хе-хе, это не свойство json, а атрибуты объекта UserProfileData :) Большое спасибо!
Ответы 1
Вы можете сделать это так
ngOnInit(): void {
this.user$ = this.user$.pipe(map(user => {
if (!user.profilePictureUrl) {
user.profilePictureUrl = '/assets/placeholder.png';
}
return user;
}));
)
В шаблоне
<ng-container *ngIf = "user$ | async as user">
<img class = "ml-lg-5 mb-2 mb-md-0 mx-auto rounded-circle" src = "{{user.profilePictureUrl}}" alt = "{{ user.username }}">
</ng-container>
Привет! Большое спасибо за это рабочее решение! Я читал, что .subscribe() не работает со стратегией обнаружения изменений onPush ootb, но если бы я следовал подходу подписки, как бы я заставил его работать?
` открытый пользователь: UserProfileData; ngOnInit(): void { this.user$.subscribe((user => { if (!user.profilePictureUrl) { user.profilePictureUrl = '/assets/placeholder.png'; } this.user = user; })); ) `В шаблоне` <img class = "ml-lg-5 mb-2 mb-md-0 mx-auto rounded-circle" src = "{{user.profilePictureUrl}}" alt = "{{ user.username } }"> `
Почему вы подписываетесь на наблюдаемые
user$как в компоненте, так и в шаблоне?