如何显示在 ionic 2 中有两列的 firebase“行”？

Question

我正在使用 Ionic 2/Typescript 创建一个分配跟踪器应用程序，并使用 Firebase 作为数据库。主页是数据库中的作业列表。当用户添加新任务时，它会从用户那里获取 2 个输入（标题和到期日期）并将它们保存到数据库中的一个条目中，没有问题。我不知道如何让条目重新显示在应用程序中？我确实让它与一个用户输入和一个警报完美地工作，而不是一个单独的页面来添加，单独的页面是它走下坡路的地方。

我不确定我是否添加错误或显示错误或两者兼有 - 任何帮助或建议将不胜感激！

用户保存新作业时的打字稿代码：

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

Answer 1

您需要创建一个新的全局数组并使用它来存储要显示的分配。将新的全局数组声明为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 以及新添加的所有分配。

让我知道它是否对你有用！