nativescript listview什么都不显示，它只是在离开页面并返回后显示

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 我把这段代码放在 return 之前

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

它正在工作