无法读取 nativescript angular2 中未定义的属性全局数组

Question

我收到一个运行时错误 cannot read property listArr of undefined。我需要在多个组件中重用同一个数组。这就是我使用全局数组

的原因

已添加相关code.please查看

Global.ts :

export class Global {

    public static listArr: ObservableArray<ListItem> = new ObservableArray<ListItem>();

}

ts 文件:

 Global.listArr.push(data.items.map(item => new ListItem(item.id, item.name, item.marks)));

html 文件:

<ListView [items]="Global.listArr"  > </ListView>

Answer 1

您无法直接在模板中访问 class 静态属性。您需要创建属性的实例才能使用它。

在这种特定情况下，在 class 中创建一个引用 Global.listArr 的实例。您可以使用此变量来推送数据并在模板中使用。这对于其他组件也将保持最新。

TS文件：

// class variable 
globalList: Global.listArr;

// use in some method 
this.globalList.push(data.items.map(item => new ListItem(item.id, item.name, item.marks)));

Html:

<ListView [items]="globalList"> </ListView>

Link 到 working demo.

Answer 2

我建议你选择 Shared Services。在服务中保留全局数组，将服务标记为 app.module i:e 您的 main module.

中的提供者

Service

import { Injectable } from '@angular/core';

@Injectable()
export class Service{

    public static myGloblaList: string[] = [];

    constructor(){}


}

将其添加到 NgModule 的 providers 数组中。

现在您可以在任何组件中使用它，例如

constructor(private service : Service){
  let globalList = this.service.myGlobalList;// your list
}

我选择一项服务的原因是它使用 Angular 的依赖注入，这是拥有全局变量的最佳 Angular 方式并在组件之间共享它。

如果您希望组件在推送和弹出时自动通知数组中的更改，您可以使用服务中的行为主题。LINK- 问题 2

Answer 3

我只能告诉您不能直接在模板中引用全局变量，因为模板绑定到组件实例。您将必须提供通过组件到模板的路径，以获取要呈现的全局值。虽然创建服务是一个不错的选择，但您也可以在组件上创建一个 getter 并包装全局变量。

看到一个Working Demo

要点是：

export class AppComponent  {
  
  get getListArr() {
      return Global.listArr;
    }
}

export class Global {

    public static listArr: string[] = [ 'a', 'b', 'c' ];

}

<!-- in your template get it this way -->
Gloabl static list with getter: {{getListArr}}

无法读取 nativescript angular2 中未定义的属性全局数组

cannot read property global array of undefined in nativescript angular2

typescript

nativescript

angular2-nativescript

angular

无法读取 nativescript angular2 中未定义的 属性 全局数组

cannot read property global array of undefined in nativescript angular2

typescript

nativescript

angular2-nativescript

angular

无法读取 nativescript angular2 中未定义的属性全局数组