使用Angular 4的箭头函数（Lambda函数）

Question

我对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};  

我的问题是，我是否可以直接在任何Angular属性上使用此Lambda函数，例如compareWith或其他类似的属性？

 <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>

- Vinit Solanki

---

首先，请阅读Angular文档，了解模板中允许和不允许的内容。其次，在JavaScript中，该结构不被称为lambda，而是称为箭头函数。 - Trash Can

有一个 GitHub 的问题单，大致上是要求支持箭头函数：14129。 - Jacob van Lingen

谢谢@JacobvanLingen，我会跟踪这个问题。 - Vinit Solanki

Answer 1

你不能在模板中直接执行箭头函数。Angular 只接受能够与 component 或 directives 绑定的表达式。所以基本上不能在模板中使用箭头函数。最好将其留在你的 component 中作为方法。

但是，如果你只是在寻找小表达式，你可以使用 shorthand if，它可能如下所示：

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

或者

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

- Patryk Brejdak

---

我猜[compareWith]="card1.pan == card2.pan"不能实现OP期望的功能。compareWith输入将是布尔值而不是函数。 - Estus Flask

当然不会。但可以通过解决方法或更改应用程序逻辑来解决。总是有使用eval并传递字符串化函数的方法，但这非常危险且不是一个好的解决方案，但它可能会奏效。 - Patryk Brejdak

我猜如果我们写 [compareWith]="card1.pan == card2.pan"，那么 Angular 将尝试在 Angular 的模型对象中查找 card1 和 card2，这将始终给我们一个 false。 - Vinit Solanki

Answer 2

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

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

- Estus Flask

---

我认为定义50个简单的id比较并不利于代码质量的提高。如果谨慎使用，这将大大简化代码并节省很多时间。 - blenderfreaky