Question

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

的原因

我添加了相关代码。请检查它。

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

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

在这种特定情况下，在引用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>

链接到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(){}


}

将其添加到providers的{{1}}数组。

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

NgModule

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

如果您希望组件在推送和弹出时自动通知阵列中的更改，您可以使用服务中的行为主题。How to call $scope.$apply() using "controller as" syntax - 问题2

Answer 3

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

查看Working Demo

这个要点是：

＆＃13;

export class AppComponent  {
  
  get getListArr() {
      return Global.listArr;
    }
}

export class Global {

    public static listArr: string[] = [ 'a', 'b', 'c' ];

}

＆＃13;

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

＆＃13;

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

3 个答案: