Мне нужно передать асинхронную переменную в функцию. Что-то вроде этого:
<div class="team" (click)="addToFavorite((match | async)?.id)">
И конечно у меня ошибка.
Ошибка синтаксического анализатора: нельзя использовать канал в выражении действия.
Может быть, есть способ преобразовать асинхронную переменную в JavaScript?
(click)="match.then(val => addToFavorite(val?.id))" 28.10.2016 polyfills.js:3 Unhandled Promise rejection: Template parse errors: Parser Error: Unexpected token > 28.10.2016 Другой вариант для простых переменных и без каких-либо наблюдаемых — запись значения переменной в скрытый ввод:
<div *ngIf="(match | async)?.id">
<input #myControl [value]="(match | async).id" type="hidden" />
<div class="team" (click)="addToFavorite(myControl.value)">
</div>
Вот как я это решил:
<div *ngIf="(match | async) as match" class="team" (click)="addToFavorite(match.id)">
Это коротко, просто и работает.
<ng-container *ngIf="(match | async) as match">
<div class="team" (click)="addToFavorite(match.id)">
</div>
</ng-container>
Обновление от 20 января 2021 г.
Чтобы быть более ясным, я бы назвал наблюдаемый источник сопоставления как match$.
И теперь мы можем использовать новый пакет @ngrx/component и использовать новую структурную директиву ngrxLet:
<ng-container *ngrxLet="match$ as match">
<div class="team" (click)="addToFavorite(match.id)">
</div>
</ng-container>
Асинхронный канал больше не нужен. Дополнительная информация о ngrx.io доступна по этой ссылке.
Вы не можете сделать это в шаблоне.
Но ты можешь:
<div class="team" (click)="addToFavorite()">
и в вашем .component.ts:
public addToFavorite() {
this
.match // should retain last value (e.g. use BehaviorSubject)
.first() // completes after passing one value only
.subscribe(
(matchValue) => {
// your logic here
});
}
Примечание: Подписываемся (и сразу отписываемся), аналогично async пайп подписывается на Observable.
Как насчет:
<div class="team" (click)="addToFavorite(match)">
а затем в вашем коде:
addToFavorite(obs: Observable<any>) {
obs.take(1).subscribe(value => {
addToFavoriteById(value.id);
});
}
.take() 28.10.2016 Кажется, вам нужно использовать вспомогательный метод:
<div class="team" (click)="onClick(match)">
class MyComponent {
onClick(event) {
event.then(val => this.addToFavorite(val?.id);
}
addToFavorite(val) {
}
}
val?.id, поэтому я просто передаю значение, и я все равно получаю наблюдаемое в addToFavorite(), а не само значение 28.10.2016 val?.id? 28.10.2016 ? доступен только внутри шаблонов angular 2, а не внутри кода компонента Typescript. Эта функция еще не реализована для Typescript, но, похоже, она находится в разработке: github. com/Microsoft/TypeScript/issues/16 20.04.2017 
