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

Question

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

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

list.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); 
    }) 
}; 

list.ts

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.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> 

Answer 1

关于你给出的信息，请看下面的代码：

/* 
* 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); 
    }); 
};