Как использовать snapshotChanges () внутри объекта, который будет отображаться правильно? - PullRequest
Новая
       8

Как использовать snapshotChanges () внутри объекта, который будет отображаться правильно?

0 голосов
/ 02 мая 2018

Я экспериментирую с Angular 5 и Firebase особенно его Realtime Database, для этого я использую angularfire2 конкретно v5, и я понимаю разницу между list и object и чем отличаются valueChanges() и snapshotChanges().

Допустим, у меня есть следующая структура базы данных в моей базе данных Firebase в реальном времени: 

"courses" : {
  "ONE" : {
    "AU" : 1,
    "COURSE" : "ONE",
    "COURSE_CODE" : "1111"
  },
  "TWO" : {
    "AU" : 2,
    "COURSE" : "TWO",
    "COURSE_CODE" : "2222"
  },
  "THREE" : {
    "AU" : 3,
    "COURSE" : "THREE",
    "COURSE_CODE" : "3333"
  },
  "FOUR" : {
    "AU" : 4,
    "COURSE" : "FOUR",
    "COURSE_CODE" : "4444"
  }
}

Здесь я хочу использовать snapshotChanges(), если мы используем его на list, оно станет примерно таким 

// on app.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  mycourses$;

  constructor(private firebaseDB: AngularFireDatabase) {
  }

  ngOnInit() {
    this.mycourses$ = this.firebaseDB.list('courses').snapshotChanges().map((changes) => {
      return changes.map((c) => ({ key: c.payload.key, ...c.payload.val() }));
    });
  }
}

, а 

// on app.component.html
<ul>
  <li *ngFor="let course of mycourses$ | async">
    <p class="course">{{ course.COURSE }}</p>
    <span class="course-code"> - {{ course.COURSE_CODE }}</span>
    <span class="au"> - {{ course.AU }} SKS</span>
  </li>
</ul>

Код выше работает безупречно , никаких проблем, как и ожидалось.

Однако , если я хочу использовать snapshotChanges() на object, например: 

// on app.component.ts
import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  mycourse$;

  constructor(private firebaseDB: AngularFireDatabase) {
  }

  ngOnInit() {
    this.mycourse$ = this.firebaseDB.object('courses/ONE').snapshotChanges().map((change) => {
      return { key: change.payload.key, ...change.payload.val() };
    });
  }
}

и 

// on app.component.html
<div *ngIf="mycourse$ | async">
  <p>{{ mycourse$.COURSE }}</p>
</div>

Приведенный выше код не будет работать , на консоли браузера не выводится сообщение об ошибке, , но браузер, просто не будет отображать значение mycourse$.COURSE, почему это? как это исправить?

...