Question

我有兄弟组件1）待办事项列表，2）工作区完成任务。这些组件具有共享数据服务，我尝试使用该服务将todo列表上的数据传输到要完成的工作空间的标题。问题是预期用字符串插值绑定的数据不会被绑定。我可以在我的控制台日志中看到它，并且在使用* ngIf =＆＃34; todo＆＃34;时就好像它在那里一样。在包装＆＃34; Div＆＃34;。当我使用* ngIf =＆＃34;！todo＆＃34;它像我期望的那样消失。

帮助弄清楚为什么数据不具有约束力，我们将非常感激！

待办事项-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)
}

}

待办事项-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();
  }
}

待办事项-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

想出来！

只需进行以下重构，并且在todo-workshop.component.ts中表现良好

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

  });
}

Angular中的FirebaseObjectObservable不显示返回的数据

1 个答案: