Question

我是nativescript和typescript的新手，导航到listview页面后，尽管在控制台日志中正确迭代对象数组，listview却不显示任何内容，但是如果我离开页面并导航回列表页面，它将正常工作 m使用mvvm模式 xml视图，ts代码背后和ts视图模型在这里查看：

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="onloaded" class="page body">
<Page.actionBar>
    <ActionBar title=" " icon="" class="action-bar  " horizontalAlignment="center">
    </ActionBar>
</Page.actionBar>

<StackLayout class="body">
   <AbsoluteLayout width="500" height="40">
        <Image left="435" top="5" src="res://backfinal" class="back" tap="{{onTapBack}}"/>
        <Image left="10" top="5" src="res://off3" class="off" tap="{{onTapLogout}}"/>
    </AbsoluteLayout>
    <Button tap="{{onTap}}" text="back" class="btn btn-primary viewbtn" />

    <ListView id="lstFish" items="{{outFishs}}" margin="15" style="font-size:18;">
        <ListView.itemTemplate >
            <GridLayout columns="*,*" rows="*" margin="10" style="text-align:right;  " class="box ">
                <Label col="0" row="0" text="{{ReceiptNumber}}" style="text-align:right;" class="listEven digit"/>
            </GridLayout >
        </ListView.itemTemplate>
    </ListView>
</StackLayout>

export class FishListViewModel extends Observable {private _Fishs: Array<Reciept>;
private _Code: string;
private apiService: ApiService;

ArrayOfFishs: MyReciept[] = [];
constructor() {
    super();
    this.apiService = new ApiService();
    this._Fishs = new Array<Reciept>();
    this.apiService.getReciepts<string>("55809").then(
        (result: MyReciept[]) => {
            var res1 = Object.assign([], result);
            console.log('m in method 2');
            for (var i = 0; i < res1.length; i++) {
                let newRec: MyReciept = <MyReciept>res1[i];
                newRec.PaymentAmount=<any>Common.formatNumber(newRec.PaymentAmount.toString());
                this.ArrayOfFishs.push(newRec);
            }
            console.log('reciepts len ts' + this.ArrayOfFishs.length);
            for (var i = 0; i < this.ArrayOfFishs.length; i++) {
                console.log('in get id 3 rn ts' + i + this.ArrayOfFishs[i]["ReceiptNumber"]);
            }
        });
}

get outFishs(): MyReciept[] {
    console.log('m in getter');
    console.log('this._Fishs.len:' + this.ArrayOfFishs.length);
    this.notifyPropertyChange('outFishs', this.ArrayOfFishs);
    return this.ArrayOfFishs;
}
public init() {
}

public onTap() {
    console.log('m in tap');
     Navigation.goToMember();
}

}

xml视图后面的

ts代码

import { EventData, Observable, fromObject } from "tns-core-modules/data

/observable";import { Page } from "tns-core-modules/ui/page";
import { FishListViewModel } from './FishList-view-model'
import { ApiService } from '../../services/ApiService'
import { ItemEventData, ListView } from "tns-core-modules/ui/list-view";
import { MyReciept } from '../../shared/Interfaces'
import * as Navigation from '../../shared/Navigation'

var vm = new FishListViewModel();
var api = new ApiService();
var fishs: MyReciept[] = [];
export function onloaded(args: EventData) {
    let page = <Page>args.object;
    page.bindingContext = vm;
    vm.init();
}

当然，我必须在第一次在viewmodel中提醒我将api函数调用放在“ init”中，但是什么也没显示，但是当我将调用函数放在结构部分中时，重新调用后它可以工作... tnx

Answer 1

您的ViewModel成为单一对象，因为它在TS文件中是全局的，并且在第一次加载该TS文件时仅创建一次。

API调用是异步的，因此假设您在API回调中调用notifyPropertyChange，可能是在日志记录之后。

第二次工作，因为阵列已从上次访问中加载。

Answer 2

终于我解决了这个问题其实我是用错误的代码通知用户界面

 this.notify({object:this , eventName:Observable.propertyChangeEvent , propertyName:'outFishs',value:this.outFishs})

正确的代码是：

this.notify({object:this , eventName:ObservableArray.propertyChangeEvent , propertyName:'outFishs',value:this.outFishs})

在outFishs getter上，我在返回之前将这段代码放在了

for (var i = 0; i < this.ArrayOfFishs.length; i++) {
            this.notifyPropertyChange('outFishs', this.ArrayOfFishs[i]);
        }

它正在工作

nativescript listview不显示任何内容，仅在离开页面并返回后显示

2 个答案: