如何在离子 2 中显示具有两列的火碱"row"？

Question

我正在创建一个带有离子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以及新添加的所有作业。

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