如何在ionic 2中显示有两列的firebase“行”？
如何在ionic 2中显示有两列的firebase“行”？
提问于 2017-03-05 01:09:41
我正在使用Ionic 2/Typescript创建一个任务跟踪应用程序，并使用Firebase作为数据库。主页是数据库中的作业列表。当用户添加新的分配时，它从用户获取两个输入(标题和到期日期)，并将它们保存到数据库中的一个条目中，而不会出现问题。我想不出如何让条目在应用程序中重新显示？我确实让它在一个用户输入和一个警告的情况下完美地工作，而不是一个单独的页面来添加，单独的页面是它走下坡路的地方。
我不确定我是添加错了还是显示错了，或者两者都错了--任何帮助或建议都会非常感谢！
用户保存新分配时的Typescript代码：
saveItem(){
var assignment = {
title : this.title,
due : this.due,
}
this.assignments.push({
assignment,
});
}用于添加新内容的离子代码：
<form (submit) = "saveItem()" >
<ion-item>
<ion-label floating>Assignment Title</ion-label>
<ion-input type="text" [(ngModel)]="title" name="title"></ion-input>
</ion-item>
<ion-item>
<ion-label floating>Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY HH:mm" [(ngModel)]="due" name="due"></ion-datetime>
</ion-item>
<div padding>
<button type="submit" color="primary" block >Save</button>
</div>
</form>显示列表的离子代码：
<ion-list>
<ion-item *ngFor="let a of assignments | async" (click)="showOptions(a.$key, a.title, a.due)">
{{a.assignment}}
</ion-item>
</ion-list>下面是它在数据库中的显示方式：testentry
回答 1
Stack Overflow用户
发布于 2017-03-06 05:19:53
您需要创建一个新的全局数组，并使用它来存储要显示的赋值。将新的全局数组声明为assignmentsList。保持您的saveItem函数不变，但进行这些更改：
在您的视图中，更改以下内容：
*ngFor="let a of assignments | async"
要这样做：
*ngFor="let a of assignmentsList | async"
在你的类中，你需要添加一个on("child_added")，就像这样:在你的构造函数中：
this.assignmentsList = [];
this.assignments.on("child_added", snapshot => {
this.assignmentsList.push(snapshot.val());
});上述代码将获取之前添加到Firebase的所有赋值以及新添加的赋值。
让我知道它是否对你有效！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42598807
复制相关文章
相似问题
腾讯云开发者
