Angular свойство async pipe и object
Мне нужно использовать async-канал без ngFor. Мне нужно проверить свойство объекта, который асинхронно загружается с наблюдаемым.
Это то, что я хочу, но не работаю:
<ion-item *ngIf="user$.anonymouse | async">
<ion-label>Login</ion-label>
</ion-item>
//EDIT: я получаю эту ошибку, когда использую код выше
ИСКЛЮЧЕНИЕ: неверный аргумент 'true' для канала 'AsyncPipe' в [! user $.anonymouse | async в SettingsPage @27: 22]
Есть ли способ решить это?
Я знаю, что могу подписаться на это наблюдаемое в Ctrl значение хранилища в обычную переменную, но я не хочу этого делать из-за производительности и т.д.
Ответы
Ответ 1
Ошибка на удивление точна, так как директива *ngIf
ожидает true
или false
и использует полученное выражение для определения того, следует ли отображать элемент HTML
в DOM.
ИСКЛЮЧЕНИЕ: неверный аргумент 'true' для канала 'AsyncPipe' в [! user $.anonymouse | async в SettingsPage @27: 22]
У вас есть выражение user$.anonymouse
, которое оценивается как правдивое, но, к сожалению, вы не можете использовать трубу async
с этой директивой. Труба async
"преобразует" (также называемую "трубами" ) вход, отображающий результирующий вывод в рамках директивы *ngFor
, например.
Труба ожидает один из трех возможных типов, определенных ниже (подробно о AsyncPipe):
transform(obj: Observable<any>| Promise<any>| EventEmitter<any>)
Есть ли способ решить это?
Да, вы можете использовать его, как он был разработан. Например, в директиве *ngFor
:
<ion-item *ngFor="user$.anonymouse | async">
<ion-label>Login</ion-label>
</ion-item>
Или вы можете полностью удалить трубопровод, поскольку он не нужен для директивы *ngIf
:
<ion-item *ngIf="user$.anonymouse">
<ion-label>Login</ion-label>
</ion-item>
Ответ 2
Как указано в комментариях @Sean, оператор *ngIf
должен основываться на исходном объекте объекта anonymouse
возвращаемого объекта user$
. Таким образом:
<ion-item *ngIf="(user$ | async)?.anonymouse">
<ion-label>Login</ion-label>
</ion-item>
Это сработало для меня, и вот пример того, как использовать результаты из приведенного ниже протокола:
Компонент
message$: Observable<{message: string}>;
private messages = [
{message: 'You are my hero!'},
{message: 'You are the best hero!'},
{message: 'Will you be my hero?'}
];
constructor() { this.resend(); }
resend() {
this.message$ = Observable.interval(500)
.map(i => this.messages[i])
.take(this.messages.length);
}
Вид
<h2>Async Hero Message and AsyncPipe</h2>
<p>Message: {{ (message$ | async)?.message }}</p>
<button (click)="resend()">Resend</button>`
Ниже приведен рабочий пример .