ionic-framework - Ionic 3 angularfire2 打印出 [object Object] 数据
问题描述
我有一个任务管理应用程序,我不希望用户能够在每个任务部分中看到他们的任务,就像在照片中一样:单击此处查看照片
我可以从数据库中获取数据并以 JSON 格式打印出来,正如您在照片中看到的那样,我将其标记为“从数据库获取任务”,但问题是我无法像“仅演示”那样显示它可以在照片中看到。
我正在使用angularfire2从 firebase 实时数据库中获取数据。
这是数据的控制台:数据的控制台
以下是提供者的代码:
getTaskSectionAndTaskList(projBoardKey) {
this.taskSectNTaskListRef = this.afDatabase.list('taskSection/' + projBoardKey);
return this.taskSectNTaskListRef;
}
以下是 .ts 文件中的代码:
...
taskList$: Observable<Task[]>;
constructor(..., private tasksecProvider: TasksectionProvider) {
...
this.taskList$ = this.tasksecProvider.getTaskSectionAndTaskList(this.selectedBoardKey)
.snapshotChanges()
.map(changes => {
return changes.map(c => ({
key: c.payload.key,
...c.payload.val()
}));
});
}
以下是 HTML 文件的代码:
<div *ngFor="let taskSectionList of taskList$ | async">
<ion-slide>
<ion-card>
<ion-card-header>
<p class="task-section-title">{{ taskSectionList.taskSectionTitle }}</p>
</ion-card-header>
<ion-card-content>
<div>
<div class="for-demo-only">
<div>
<p>Task Name</p>
</div>
</div>
<div>
{{ taskSectionList.task | json }}
</div>
</div>
</ion-card-content>
<ion-card>
</ion-slide>
</div>
解决方案
我已经通过使用管道解决了我的问题:
以下是管道的代码:
import { Pipe, PipeTransform } from '@angular/core';
/**
* Generated class for the GettaskPipe pipe.
*
* See https://angular.io/api/core/Pipe for more info on Angular Pipes.
*/
@Pipe({
name: 'gettask',
})
export class GettaskPipe implements PipeTransform {
/**
* Takes a value and makes it lowercase.
*/
transform(obj: any) {
let tempResult = [];
let result = [];
for (var key in obj.task) {
if (obj.task.hasOwnProperty(key)) {
result.push({
key: key,
...obj.task[key]
});
}
}
return result;
}
}
这是我对 HTML 文件所做的更改:
<div *ngFor="let taskSectionList of taskList$ | async">
<ion-slide>
<ion-card>
<ion-card-header>
<p class="task-section-title">{{ taskSectionList.taskSectionTitle }}</p>
</ion-card-header>
<ion-card-content>
<div>
<div class="for-demo-only">
<div>
<p>Task Name</p>
</div>
</div>
<div *ngFor="let task of taskSectionList | gettask">
{{ task.taskName }}
</div>
</div>
</ion-card-content>
<ion-card>
</ion-slide>
现在我可以像演示一样显示任务名称,只需对其应用一些 css 即可。
推荐阅读
- javascript - swal 未在 chrome 扩展中呈现
- reactjs - 通过路线传递道具
- r - R Shiny DT - 使用反应式编辑表中的值
- c# - DateTimeKind.Utc 与 DateTimeKind.Local
- android - 登录字段为空时出现空指针异常 - Firebase
- php - 在 PHP-Mysql 中将用户重定向到由他/她的电话号码命名的文件夹
- python - 链表算法的最坏情况输入
- php - 为什么它显示 wpdb insert sql 错误?
- c# - FillEllipse,DrawEllipse,在里面绘制
- css - 将颜色应用于 ActionLink