Ionic 3 angularfire2 распечатать данные объекта - PullRequest
Новая
       36

Ionic 3 angularfire2 распечатать данные объекта

0 голосов
/ 30 апреля 2018

У меня есть приложения для управления задачами, в которых я не хочу пользователя , чтобы иметь возможность видеть свою задачу в каждом из разделов задачи , как на фотографии: Нажмите здесь, чтобы увидеть фотографию

Я могу получить данные из базы данных и распечатать их в формате 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>

1 Ответ

0 голосов
/ 30 апреля 2018

Я решил свои проблемы с помощью труб:

Вот код для труб: 

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, тогда оно будет выглядеть уже так.

...