根据 nativescript/angular 中的项目属性设置元素属性

Question

目前，我想知道是否可以在 ngFor 循环中调用项目元素上的函数来设置一些属性。否则，我将不得不循环两次（第一次在脚本部分，第二次在模板部分）并只将临时属性设置为一个应该只有特定属性的模型，但是设置属性的代码使模板又丑又多余，所以我想把它外包成一个函数。

例如：

<StackLayout *ngFor="let item of items">
    <Label setProperties(el,item)></Label>
</StackLayout>

和

function setProperties(el,item) {
    el.text = item.fullname;
    let color = '';
    switch(item.state) {
        case 'success':
            let color = 'green';
            break;
        case 'fail':
            let color = 'red';
            break;
    }
    el.style.color = color;
}

类似的东西，当然在肉体上更复杂 ;-)

提前致谢！

Answer 1

这应该是您想要的

<StackLayout *ngFor="let item of items">
    <Label [style.color]="item.state == 'success' ? 'green' : item.state == 'failed' ? 'red' : item.state == 'other' ? 'yellow' : 'blue' " [text]="item.fullname"></Label>
</StackLayout>

--添加--

我加了一个multi switch作为例子，你可以把multi弄的越长越好

Answer 2

可以通过使用onItemLoading事件或多或少地实现。老实说，它的行为与循环项目 onInit 非常相似，但好处是，onItemLoading 事件是实现该目标的内置方式。

http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/How-To/item-customization#the-itemloading-event

根据 nativescript/angular 中的项目属性设置元素属性

Set element attributes based on item properties in nativescript/angular

javascript

typescript

angular2-nativescript

angular