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以及新添加的所有作业。

让我知道它是否适合你！

如何显示一个firebase＆＃34; row＆＃34;在离子2中有两列？

1 个答案: