Angbase에서 FirebaseObjectObservable이 반환 된 데이터를 표시하지 않습니다.

Question

형제 구성 요소가 있습니다. 1) 수행 할 작업 목록 및 2) 작업을 완료하는 작업 영역. 이러한 구성 요소에는 수행 할 작업 영역의 헤더로 todo 목록의 데이터를 전송하는 데 사용하려고하는 공유 데이터 서비스가 있습니다. 문제는 문자열 보간에 바인딩 될 것으로 예상되는 데이터가 바인딩되지 않는다는 것입니다. 내 콘솔 로그에서 볼 수 있으며, "div"를 배치 할 때 * ngIf = "todo"를 사용할 때와 같은 역할을합니다. * ngIf = "! todo"를 사용하면 예상대로 사라집니다.

왜 데이터가 바인딩되지 않는 지 알아내는 데 도움이 될 것입니다.

TODO-list.service.ts

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 
import { AngularFirestore } from 'angularfire2/firestore'; 
import { FirebaseListObservable, FirebaseObjectObservable, 
AngularFireDatabase } from 'angularfire2/database-deprecated'; 

import {Todo} from './todo-list.model'; 


@Injectable() 
export class TodoListService { 

private basePath: string = '/todoList'; 
private baseUrl: string; 

todoList: FirebaseListObservable<Todo[]> = null; 
todo: FirebaseObjectObservable<Todo>= null; 

constructor(
    private db: AngularFireDatabase,) 
    { this.todoList = db.list('/todoList');} 

getTodosList(query = {}): FirebaseListObservable<Todo[]> { 
    this.todoList = this.db.list(this.basePath, { 
     query: query 
    }); 
    return this.todoList 

} 

// Return a single observable item 
getTodo(key: string): FirebaseObjectObservable<Todo> { 
    const itemPath = `${this.basePath}/${key}`; 
    this.todo = this.db.object(itemPath) 

    return this.todo 
} 

createTodo(todo: Todo): void { 
    this.todoList.push(todo) 
     // .catch(error => this.handleError(error)) 
} 
// Update an existing item 
updateTodo(key: string, value: any): void { 
    this.todoList.update(key, value) 
     .catch(error => this.handleError(error)) 
} 
// Deletes a single item 
deleteTodo(key: string): void { 
    this.todoList.remove(key) 
     .catch(error => this.handleError(error)) 
} 
// Deletes the entire list of items 
deleteAll(): void { 
    this.todoList.remove() 
     .catch(error => this.handleError(error)) 
} 

// Default error handling for all actions 
private handleError(error) { 
    console.log(error) 
} 

} 

TODO-workspace.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { ActivatedRoute, Params, ParamMap } from "@angular/router"; 
import { Location } from '@angular/common'; 
import { AngularFireDatabaseModule } from "angularfire2/database"; 
import { FirebaseListObservable, FirebaseObjectObservable,   
AngularFireDatabase } from "angularfire2/database-deprecated"; 
import 'rxjs/add/operator/switchMap'; 


import { Todo } from './../shared/todo-list.model' 

import { TodoListService } from './../shared/todo-list.service'; 

@Component({ 
    selector: 'aurora-todo-workspace', 
    templateUrl: './todo-workspace.component.html', 
    styleUrls: ['./todo-workspace.component.css'] 
}) 
export class TodoWorkspaceComponent implements OnInit{ 

    todo: any[]=[]; 

    constructor(
    private todoListService: TodoListService, 
    private location: Location, 
    private route: ActivatedRoute, 
    private db: AngularFireDatabase, 
) {} 

    ngOnInit(): void { 
    this.route.paramMap 
     .switchMap((params: ParamMap) =>  
    this.todoListService.getTodo(params.get('id'))) 
     .subscribe(todo => console.log(todo), 
     err => console.error(err), 
); 
} 

    onStreamRefreshClick() { 
     return null 
    } 

    goBack(): void { 
    this.location.back(); 
    } 
} 

TODO-workspace.component.html

<div class="workspace-container"> 
    <!--*ngIf="loggedIn$ | async"--> 
    <div class="card workspace-container"> 
    <div class="card-block k-form"> 
     <button kendoButton [primary]="true" [icon]="'arrow-left'" 
(click)="goBack()">Back to Dashboard</button> 
    <button class="refresh-btn" kendoButton 
(click)="onStreamRefreshClick($event)" [icon]="'refresh'" 
[look]="'outline'"></button> 
    <button class="sign-btn" kendoButton (click)="signSubmit()" 
[primary]="true">Sign & Submit</button> 
    <fieldset *ngIf="todo"> 
    <legend> 
     Workspace for {{ todo.firstName }} {{ todo.lastName }} | {{ 
todo.type }} | {{todo.date | kendoDate: 'MM/dd'}} 
     @ {{ todo.time | kendoDate:'hh:mm a' }} | {{ todo.where }} | {{ 
todo.why }} 
    </legend> 
    </fieldset> 
</div> 

Answer 1

알아 냈어!

그냥 다음과 같은 리팩토링을 수행했고, 잭 - workshop.component.ts에 좋았다

ngOnInit(){ 
this.route.params 
    .map(params => params ['id']) 
    .subscribe((id) => { 
    this.todoListService 
     .getTodo(id) 
     .subscribe(todo => this.todo = todo); 

    }); 
}