使用NativeScript和TypeScript从Firebase数据库填充ListView

使用TypeScript开发NativeScript应用程序时，后端为Firebase，列表中未填充Firebase值

这里我附上了我的代码文件。将登录页面导航到我的列表页面时，不会显示任何项目。我如何解决这个问题

列表.model.ts

function indexOf(item) {
  var match = -1;

  this.forEach((loopItem, index) => {
    if (loopItem.id === item.key) {
      match = index;
    }
  });
  return match;
};

function load() {
  var onChildEvent = (result) => {

  var viewModel = new ObservableArray();

  viewModel.indexOf = indexOf;
  var matches = [];

  if (result.type === "ChildAdded") {
    if (result.value.UID === config.uid) {
      viewModel.push({
        name: result.value.Name,
        id: result.key
      });
    }
  } else if (result.type === "ChildRemoved") {
    matches.push(result);
    matches.forEach((match) => {
    var index = viewModel.indexOf(match);

    viewModel.splice(index, 1);
  });
}

};

return firebase.addChildEventListener(onChildEvent, "/Groceries").then(
  () => {
    console.log("firebase.addChildEventListener added");
  },
  (error) => {
    console.log("firebase.addChildEventListener error: " + error);
  })
};

var load = require("path");
var pageData = new Observable({
  groceryList: new ObservableArray([])
});

export function loaded (args: observableModule.EventData) {
  var sender = <view.View>args.object;
  var parent = sender.parent;
  var name = <Label>view.getViewById(parent, "name");

  page = args.object;
  page.bindingContext = pageData;
  load();

};

list.ts

function indexOf(item) {
  var match = -1;

  this.forEach((loopItem, index) => {
    if (loopItem.id === item.key) {
      match = index;
    }
  });
  return match;
};

function load() {
  var onChildEvent = (result) => {

  var viewModel = new ObservableArray();

  viewModel.indexOf = indexOf;
  var matches = [];

  if (result.type === "ChildAdded") {
    if (result.value.UID === config.uid) {
      viewModel.push({
        name: result.value.Name,
        id: result.key
      });
    }
  } else if (result.type === "ChildRemoved") {
    matches.push(result);
    matches.forEach((match) => {
    var index = viewModel.indexOf(match);

    viewModel.splice(index, 1);
  });
}

};

return firebase.addChildEventListener(onChildEvent, "/Groceries").then(
  () => {
    console.log("firebase.addChildEventListener added");
  },
  (error) => {
    console.log("firebase.addChildEventListener error: " + error);
  })
};

var load = require("path");
var pageData = new Observable({
  groceryList: new ObservableArray([])
});

export function loaded (args: observableModule.EventData) {
  var sender = <view.View>args.object;
  var parent = sender.parent;
  var name = <Label>view.getViewById(parent, "name");

  page = args.object;
  page.bindingContext = pageData;
  load();

};

var load=require（“路径”）；
var pageData=新的可观测数据({
杂货店列表：新的可观察的array（[]）
});
已加载导出函数（参数：ObservaleModule.EventData）{
var sender=args.object；
var parent=sender.parent；
var name=view.getViewById（父，“名称”）；
page=args.object；
page.bindingContext=pageData；
加载（）；
};

list.xml

<Page loaded="loaded">
<GridLayout rows="auto, *" columns="2*, *">
<TextField id="grocery" text="{{ grocery }}" hint="Enter a grocery item" row="0" col="0" />
    <Button text="Add" tap="addGrocery" row="0" col="1" />
    <ListView id="groceryList" items="{{ groceryList }}" row="1" colSpan="2">
        <ListView.itemTemplate>
        <GridLayout columns="*, auto">
            <Label text="{{ name }}" horizontalAlignment="left" verticalAlignment="center"/>
            </GridLayout>
        </ListView.itemTemplate>
    </ListView>
</GridLayout>
</Page>

---

关于您提供的信息，请查找以下代码：

/*
 * list.model.ts
 */

 export function load(fnResultCallback) {
    var onChildEvent = (result) => {
        var items = [];
        var matches = [];

        if (result.type === "ChildAdded") {
            if (result.value.UID === config.uid) {
                items.push({
                    name: result.value.Name,
                    id: result.key
                });
            }
        } else if (result.type === "ChildRemoved") {
            matches.push(result);
            matches.forEach((match) => {
                var index = indexOf(match, items);
                items.splice(index, 1);
            };
        }

        fnResultCallback(items);
    };
    firebase.addChildEventListener(onChildEvent, "/Groceries").then(
        () => {
            console.log("firebase.addChildEventListener added");
        },
        (error) => {
            console.log("firebase.addChildEventListener error: " + error);
        });
    }
 }

function indexOf(item, items) {
  var match = -1;

  items.forEach((loopItem, index) => {
    if (loopItem.id === item.key) {
      match = index;
    }
  });
  return match;
};

/*
 * list.ts
 */

var model = require("path");
var pageData = new Observable({
  groceryList: new ObservableArray([])
});

export function loaded (args: observableModule.EventData) {
  var sender = <view.View>args.object;
  var parent = sender.parent;
  var name = <Label>view.getViewById(parent, "name");

  page = args.object;
  page.bindingContext = pageData;
  model.load((result) => {
    pageData.groceryList = new ObservableArray(result);
  });
};

/*
*list.model.ts
*/
导出函数加载（fnResultCallback）{
var onChildEvent=（结果）=>{
var项目=[]；
var匹配=[]；
如果（result.type==“ChildAdded”）{
if（result.value.UID==config.UID）{
推({
名称：result.value.name，
id:result.key
});
}
}else if（result.type==“ChildRemoved”）{
匹配。推送（结果）；
匹配项。forEach（（匹配）=>{
var指数=指数（匹配，项目）；
项目.拼接（索引，1）；
};
}
fnResultCallback（项目）；
};
addChildEventListener（onChildEvent，“/Groceries”）。然后(
() => {
log（“添加了firebase.addChildEventListener”）；
},
（错误）=>{
log（“firebase.addChildEventListener错误：+错误”）；
});
}
}
功能索引（项，项）{
var匹配=-1；
items.forEach（（loopItem，index）=>{
if（loopItem.id==item.key）{
匹配=索引；
}
});
复赛；
};
/*
*list.ts
*/
var模型=要求（“路径”）；
var pageData=新的可观测数据({
杂货店列表：新的可观察的array（[]）
});
已加载导出函数（参数：ObservaleModule.EventData）{
var sender=args.object；
var parent=sender.parent；
var name=view.getViewById（父，“名称”）；
page=args.object；
page.bindingContext=pageData；
模型负载（（结果）=>{
pageData.groceryList=新的ObservableArray（结果）；
});
};

关于您提供的信息，请查找以下代码：

/*
 * list.model.ts
 */

 export function load(fnResultCallback) {
    var onChildEvent = (result) => {
        var items = [];
        var matches = [];

        if (result.type === "ChildAdded") {
            if (result.value.UID === config.uid) {
                items.push({
                    name: result.value.Name,
                    id: result.key
                });
            }
        } else if (result.type === "ChildRemoved") {
            matches.push(result);
            matches.forEach((match) => {
                var index = indexOf(match, items);
                items.splice(index, 1);
            };
        }

        fnResultCallback(items);
    };
    firebase.addChildEventListener(onChildEvent, "/Groceries").then(
        () => {
            console.log("firebase.addChildEventListener added");
        },
        (error) => {
            console.log("firebase.addChildEventListener error: " + error);
        });
    }
 }

function indexOf(item, items) {
  var match = -1;

  items.forEach((loopItem, index) => {
    if (loopItem.id === item.key) {
      match = index;
    }
  });
  return match;
};

/*
 * list.ts
 */

var model = require("path");
var pageData = new Observable({
  groceryList: new ObservableArray([])
});

export function loaded (args: observableModule.EventData) {
  var sender = <view.View>args.object;
  var parent = sender.parent;
  var name = <Label>view.getViewById(parent, "name");

  page = args.object;
  page.bindingContext = pageData;
  model.load((result) => {
    pageData.groceryList = new ObservableArray(result);
  });
};

/*
*list.model.ts
*/
导出函数加载（fnResultCallback）{
var onChildEvent=（结果）=>{
var项目=[]；
var匹配=[]；
如果（result.type==“ChildAdded”）{
if（result.value.UID==config.UID）{
推({
名称：result.value.name，
id:result.key
});
}
}else if（result.type==“ChildRemoved”）{
匹配。推送（结果）；
匹配项。forEach（（匹配）=>{
var指数=指数（匹配，项目）；
项目.拼接（索引，1）；
};
}
fnResultCallback（项目）；
};
addChildEventListener（onChildEvent，“/Groceries”）。然后(
() => {
log（“添加了firebase.addChildEventListener”）；
},
（错误）=>{
log（“firebase.addChildEventListener错误：+错误”）；
});
}
}
功能索引（项，项）{
var匹配=-1；
items.forEach（（loopItem，index）=>{
if（loopItem.id==item.key）{
匹配=索引；
}
});
复赛；
};
/*
*list.ts
*/
var模型=要求（“路径”）；
var pageData=新的可观测数据({
杂货店列表：新的可观察的array（[]）
});
已加载导出函数（参数：ObservaleModule.EventData）{
var sender=args.object；
var parent=sender.parent；
var name=view.getViewById（父，“名称”）；
page=args.object；
page.bindingContext=pageData；
模型负载（（结果）=>{
pageData.groceryList=新的ObservableArray（结果）；
});
};

在

list.ts

中，我看不到您在哪里使用和调用

load

方法

list.model.ts

edited list.ts。这就是调用list.model.ts的加载方法。使用您的代码，

groceryList

永远不会被任何东西更新，因为在

list.model.ts

中，您创建了一个新的视图模型，并且永远不会返回它。您能编辑吗到您的

require（）

在

list.ts

中，我看不到您在哪里使用和调用

load

方法

list.model.ts

edited list.ts。这就是调用list.model.ts的加载方法。使用您的代码，

groceryList

永远不会被任何东西更新，因为在

list.model.ts

中，您创建了一个新的视图模型，并且永远不会返回它。您能编辑吗你的

require（）

你能详细说明一下吗？你能详细说明一下吗？