具有Angular 4的箭头函数(Lambda函数)

时间:2017-12-05 06:51:31

标签: angular typescript lambda

我对lambda知之甚少,而lambda表达式被视为一个函数。我们有很多方法可以做到这一点。

这是我在TypeScript档案

上的简单功能
 byPan(card1,card2){
    return card1.pan == card2.pan;
 }

我在HTML文件中使用

 <select [compareWith]="byPan" class="form-control" [(ngModel)]="card">
     <option *ngFor="let cardInfo of cards" [ngValue]="cardInfo">{{cardInfo.pan}}</option>
 </select>

如果我想在lambda中替换这个函数,那么我可以写如下。

var myFunc2 = (card1, card2) => { return card1.pan == card2.pan};  

所以我的问题是,我可以直接在compareWith之类的任何角度属性上使用这个lambda函数吗?

 <select [compareWith]="(card1,card2)=> { return card1.pan == card2.pan}" class="form-control" [(ngModel)]="card">
     <option *ngFor="let cardInfo of cards" [ngValue]="cardInfo">{{cardInfo.pan}}</option>
 </select>

2 个答案:

答案 0 :(得分:3)

您无法在模板中执行箭头功能。 Angular只接受可以与componentdirectives绑定的表达式。所以基本上没有,你不能在模板中使用箭头功能。最好将其作为component中的一种方法。

但是,如果您正在查看小表达式,可以使用shorthand if,它可能看起来像:

[compareWith]="card1.pan == card2.pan" // returns bool value

[compareWith]="card1.pan == card2.pan ? 'foo' : 'bar".

答案 1 :(得分:3)

无法在模板中定义函数,主要是因为这会在JIT编译模式下导致eval。使用组件模板来处理主要属于类的事物将导致难以维护的低质量代码。

如果定义了函数,则应将其定义为组件类方法。它可以是常规函数或箭头函数。