2016-10-28 39 views
3

我需要将异步变量传递给函数。 事情是这样的:如何在模板(动作)函数中传递异步变量?

<div class="team" (click)="addToFavorite((match | async)?.id)"> 

当然,我有一个错误。

也许有一种方法来转换JavaScript中的异步变量?

+0

如果你让我们知道错误是什么,会友好的。 –

+0

值得一试 '(点击)= “match.then(VAL => addToFavorite(VAL .ID)?)”' –

+0

@GünterZöchbauer ''' 分析器错误:无法在一个动作表达的管道。 ''' – Alexandr

回答

1

什么:

<div class="team" (click)="addToFavorite(match)"> 

,然后在你的代码:

addToFavorite(obs: Observable<any>) { 
    obs.take(1).subscribe(value => { 
    addToFavoriteById(value.id); 
    }); 
} 
+0

我有控制台错误 '内联模板:12:38引起:obs.take不是函数' – Alexandr

+1

您需要导入运算符,如'.take()' –

+0

@GünterZöchbauer 好吧我做了,它的工作! 谢谢! – Alexandr

0

看来你需要使用一个辅助方法:

<div class="team" (click)="onClick(match)"> 
class MyComponent { 
    onClick(event) { 
    event.then(val => this.addToFavorite(val?.id); 
    } 
    addToFavorite(val) { 
    } 
} 
+0

我不能用这个'VAL .id'所以我只是传递价值 ?并且我仍然可以在addToFavorite()中观察到,而不是本身的值 – Alexandr

+0

为什么不能使用'val?.id'? –

+0

据我所知,'?'操作符只能在角度2模板中使用,而不能在Typescript组件代码中使用。这个功能尚未实现Typescript,但它似乎在工作中:https://github.com/Microsoft/TypeScript/issues/16 –

3

另一种选择为简单的变量和没有任何可观察到的是将变量的值写入隐藏的输入:

<div *ngIf="(match | async)?.id"> 
    <input #myControl [value]="(match | async).id" type="hidden" /> 
    <div class="team" (click)="addToFavorite(myControl.value)"> 
</div> 
+0

非常好的解决方法!但是,我只能得到这个工作,没有* ngIf输入和按钮周围的包装。 – Todor

0

你不能在模板中做到这一点。

,但你可以:

<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

相关问题