使用 nativescript 转换器答案

【问题标题】：Using nativescript converters使用 nativescript 转换器
【发布时间】：2017-04-07 05:11:25
【问题描述】：

我刚刚尝试使用 javascript 将我的钩子放入 nativescript 并且有一个非常基本的问题：

    let costFormatter= {
        toView(value){
            console.log('Got:' + value);
            return '$' + value;
        },
        toModel(value){
            console.log('Got:' + value);
            return '$' + value;
        }
    };
    http.getJSON("<My API Call>").then(function (r){
        page.bindingContext = {
            deals: r,
            costFormatter:costFormatter
        };
    }, function (e){
        //// Argument (e) is Error!
        //console.log(e);
    });

在上面的代码中，我定义了成本格式化程序，我只想在我的列表视图标签上的每个销售价格的价格旁边添加一个 $。渲染列表视图我使用：

<ListView id="SteamItems" items="{{ deals }}">
                        <ListView.itemTemplate>
                            <GridLayout columns="*, *, 50, 50" rows="50, 50, auto, *">
                                <Image src="{{ thumb }}" row="0" col="0" cssClass="thumb"/>
                                <Label text="{{ title }}" key="1" row="0" col="1" cssClass="title"/>
                                <Label text="{{ normalPrice|costFormatter }}" key="2" row="0" col="2" cssClass="normal-price"/>
                                <Label text="{{ salePrice|costFormatter }}" key="3" row="0" col="3" cssClass="sale-price"/>

                            </GridLayout>

                        </ListView.itemTemplate>
                    </ListView>

我不明白为什么我得到了

JS: Cannot find function or filter: costFormatter

对于我的 nativescript 终端中的列表视图中的每一行。我做错了什么？

【问题讨论】：

标签： javascript android nativescript

【解决方案1】：

您似乎正在尝试创建所谓的“管道”。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'costFormatter',
  pure: true
})

export class CostFormatterPipe implements PipeTransform {
  transform(price: string): string {
    return "$ " + price;
  }
}

然后确保将CostFormatterPipe 添加到要在其中使用它的模块的Declarations 数组中。

【讨论】：

我正在尝试这样做，是的，但没有角度！ Nativescript 应该也可以在没有角度的情况下工作，对吧？
抱歉。我看到了那个管道，并假设你使用了 Angular :) .. 确保你可以在没有 Angular 的情况下使用 NativeScript。你看过这个转换器的官方文档吗？ docs.nativescript.org/angular/core-concepts/…

【解决方案2】：

查看此文档页面1 的说明。 ListView 项目的特殊注意事项在页面下方的 2/3 处进行了描述。基本上，在应用程序资源中注册您的转换器功能。希望对您有所帮助。它对我有用。

【讨论】：