视图模型中的 JSON 值仅显示为 [object Object]答案

【问题标题】：JSON value in View Model displayed as [object Object] only视图模型中的 JSON 值仅显示为 [object Object]
【发布时间】：2017-12-01 01:15:01
【问题描述】：

这将是一个菜鸟问题。我正在开发我的第一个 NativeScript 应用程序，一个简单的 GPS 跟踪器。这只是一种观点。我让Location 插件工作，它很好地将位置数据输出到控制台。它似乎也更新了视图模型。但是当我尝试将它绑定到 Label 元素的文本时，它只显示 [object Object]，不管我做什么。

视图模型：

var observableModule = require("data/observable");

function viewModel() {

    return new observableModule.fromObject({
        "locations": [],
        "lastLocation": {
            "latitude": "0",
            "longitude": "0",
            "altitude": 0,
            "horizontalAccuracy": 0,
            "verticalAccuracy": 0,
            "speed": "0",
            "direction": "0",
            "timestamp": new Date().toISOString()
        },
        "lastUpload": "Unknown"
    });

}


module.exports = viewModel;

视图 XML：（只是重要部分）

<Label text="Current location:"/>
<Label text="{{ lastLocation?.latitude }} ; {{ lastLocation?.longitude }}" />

<Label text="Last location update:"/>
<Label text="{{ lastLocation?.timestamp }}" />

<Label text="Last successful upload:"/>
<Label text="{{ lastUpload }}" />

代码：

var frameModule = require("ui/frame");
var viewModel = require("./home-view-model");
var geolocation = require("nativescript-geolocation");
var dialog = require("ui/dialogs");

var viewModel = new viewModel();

function onLoaded(args) {

    page = args.object;
    page.bindingContext = viewModel;

    var enableLocation = new Promise((resolve, reject) => {
        geolocation.enableLocationRequest(true)
            .then(
            success => resolve(),
            error => reject(error)
            )
    })

        .then(
        () => {
            watchId = geolocation.watchLocation(
                function (loc) {
                    if (loc) {
                        viewModel.lastLocation = loc;
                        console.log(viewModel.lastLocation.latitude + ' ; ' + viewModel.lastLocation.longitude);
                    }
                },
                function (e) {
                    dialogsModule.alert('Location error: ' + e.message);
                },
                {
                    desiredAccuracy: 3,
                    updateDistance: 0,
                    minimumUpdateTime: 10000
                })
        },

        error => {
            dialogsModule.alert('Location error: ' + e.message);
        }
        )

}

exports.onLoaded = onLoaded;

console.log 行正确显示纬度和经度值。视图显示 [object Object]，但它显示lastUpload 值正确。我在视图中做错了什么？

【问题讨论】：

标签： nativescript

【解决方案1】：

哦，是的，这是一个菜鸟问题。解决方案是我不应该在模板中使用问号。

<Label text="Current location:"/>
<Label text="{{ lastLocation.latitude }} ; {{ lastLocation.longitude }}" />

<Label text="Last location update:"/>
<Label text="{{ lastLocation.timestamp }}" />

现在可以了。

【讨论】：