如何在Angular 2模板中定义变量？

假设我使用的模板中的某个地方：

<div *ng-for="#fooItem of foo">
    {{fooItem.bar.baz.value}}
</div>

{{fooItem.bar.baz.value}

我希望能够编写类似于

{{theBaz}}

的东西，而不是每次在循环中都使用

fooItem.bar.baz

。有没有办法做到这一点？也许是一些允许定义任意变量的语法

---

其中提到了涉及组件/指令设置值的用法，但显然没有更简单的方法。

一种可能的解决方案是使用一个小的

get-the-baz.ts：

import {Pipe} from 'angular2/angular2';

@Pipe({
    name: 'theBaz'
})

export class GetTheBaz {
    transform(item) {
        return item.bar.baz.value
    }
}

在你的应用程序中：

import {Component, bootstrap, NgFor} from 'angular2/angular2';
import {GetTheBaz} from './get-the-baz';

@Component({
    selector: 'my-app',
    directives: [NgFor],
    pipes: [GetTheBaz],
    template: `QuickApp: 
    <div *ng-for="#item of list">
        {{item|theBaz}}
    </div>
    `
})

从'angular2/angular2'导入{Component，bootstrap，NgFor}；
从“./获取baz”导入{GetTheBaz}；
@组成部分({
选择器：“我的应用程序”，
指令：[NgFor]，
管道：[GetTheBaz]，
模板：`QuickApp:
{{项目| theBaz}}
`
})

根据您的用例，这可能是一个好主意，也可能不是一个好主意

编辑：另外两个解决方案

查看我添加的以下代码：

列表上的管道和

一个好的老式函数

（我还将上述管道包含在项目解决方案中，以供比较）

从'angular2/angular2'导入{Component，bootstrap，NgFor}；
从'angular2/angular2'导入{Pipe}；
//这可能不是最有效的方法，我马上会做一些研究和编辑
var_getC=val=>（val&&val['a']&&val.a['b']）？val.a.b['c']：空；
@烟斗({
名称：'pipeC'
})
出口级pipeC{
变换（val）{
返回（val）
}
}
@烟斗({
名称：“pipeCFromList”
})
导出类pipeCFromList{
转换（列表）{
返回列表.map（_getC）；
}
}
@组成部分({
选择器：“我的应用程序”，
指令：[NgFor]，
管道：[pipeC，pipeCFromList]，
模板：`QuickApp:
管道项目：

管道清单：

func项目：

`
})
类AppComponent{
公共getC（val）{
返回_getC（val）；
};
列表=[{a:{b:{c:1}}]
}
bootstrap（AppComponent）；

---

也可以试试这些^

谢谢。冷却液。把它打开，以防有人提出更好的建议。我认为一个隐藏的输入字段也可以，但这并不太好。我完全理解你的犹豫，这不太好。我想最终你将不得不把你的属性访问逻辑放在某个地方。如果你能在

ng中为

完成解构赋值，那将是另一个选择。事实上，你可能会发现把所有的东西都放在那里看可能是最好的选择。或者当然是一个很好的老式反思。不管怎样，g'Luckp都可能是

import {Component, bootstrap, NgFor} from 'angular2/angular2';
import {Pipe} from 'angular2/angular2';

// This may not be the most efficient way, I'll do some research and edit in a moment
var _getC = val => (val && val['a'] && val.a['b'] ) ? val.a.b['c'] : null; 


@Pipe({
    name: 'pipeC'
})
export class pipeC {
    transform(val) {
        return _getC(val)
    }
}

@Pipe({
    name: 'pipeCFromList'
})
export class pipeCFromList {
    transform(list) {
        return list.map(_getC);
    }
}

@Component({
    selector: 'my-app',
    directives: [NgFor],
    pipes: [pipeC, pipeCFromList],
    template: `QuickApp:
    <p>pipe item:</p> 
    <div *ng-for="#item of list">
        <item [text-content]="item|pipeC"> </item>
    </div>

    <p>pipe list:</p>
    <div *ng-for="#num of list|pipeCFromList">
        <item [text-content]="num"> </item>
</div>
    <p>func item:</p>
    <div *ng-for="#item of list">
        <item [text-content]="getC(item)"> </item>
</div>
    `
})

class AppComponent {
    public getC (val) {
        return _getC(val);
    };
    list = [{a:{b:{c:1}}}]
}
bootstrap(AppComponent);