從訂閱訪問屬性

Question

我在解決如何在角度2項目中訪問rxJS訂閱的屬性時遇到問題。

我知道我的服務正在工作，因爲我可以將{{selectedCustomer.name}}放在我的模板中，它顯示我的名字，我只是無法弄清楚如何在我的組件中訪問它，所以我可以將它分配爲的ngInit。

如果有人可以幫助就如何做到這一點，將不勝感激

服務

import { Injectable } from '@angular/core'; 

import { Customer } from "./customer-model"; 

import { AngularFire, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2'; 

import "rxjs/add/operator/filter"; 

declare var firebase: any; 

@Injectable() 
export class CustomerService { 

    // customer: Customer; 
    customer: FirebaseObjectObservable<Customer[]>; 
    customers: FirebaseListObservable<Customer[]>; 

    constructor(private af: AngularFire) { } 

    getCustomers(category: string = null) { 
     if (category != null) { 
      this.customers = this.af.database.list('customer', { 
       query: { 
        orderByChild: 'category', 
        equalTo: category 
       } 
      }); 

     } else { 

      this.customers = this.af.database.list('customer') as FirebaseListObservable<Customer[]>; 

     } 

     return this.customers; 
    } 

    getCustomer(customerIndex: number) { 

     this.af.database.object('/customer/' + customerIndex) 
      .subscribe(customer => { 
       this.customer = customer; 
      }); 
     return this.customer; 
    } 

    addCustomer(customer: Customer) { 

     // Get new unique key for customer 
     var customerKey = firebase.database().ref().child('customer').push().key; 

     // Create reference to new customer key 
     var newCustomer = {}; 
     newCustomer['/customer/' + customerKey] = customer; 

     return firebase.database().ref().update(newCustomer); 
    } 

    deleteCustomer(customerIndex: number) { 
     this.af.database.object('/customer/' + customerIndex).remove(); 
    } 

} 

模板

<form [formGroup]="myForm" (ngSubmit)="onAddCustomer()"> 
    <md-card class="demo-card demo-basic"> 
    <md-toolbar color="primary">Edit</md-toolbar> 
    <md-card-content> 
     <br> 
     <table style="width: 100%" cellspacing="0"> 
     <tr> 
      <td> 
      <md-input placeholder="Organisation" style="width: 100%" formControlName="name" type="test" id="name" #name></md-input> 
      </td> 
      <td> 
      <md-input placeholder="Description" style="width: 100%" formControlName="description" type="test" id="description" #description></md-input> 
      </td> 
      <td> 
      <md-input placeholder="Image Url" style="width: 100%" formControlName="imagePath" type="test" id="imagePath" #imagePath></md-input> 
      </td> 
     </tr> 

     </table> 
    </md-card-content> 
    </md-card> 

</form> 

組件

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { FormBuilder, FormGroup, Validators, FormControl } from "@angular/forms"; 

import { Subscription } from 'rxjs/Rx'; 

import { FirebaseObjectObservable } from 'angularfire2'; 

import { Customer } from '../customer-model'; 
import { CustomerService } from '../customer.service'; 

@Component({ 
    selector: 'mj-customer-edit', 
    templateUrl: './customer-edit.component.html', 
    styleUrls: ['./customer-edit.component.css'] 
}) 
export class CustomerEditComponent implements OnInit, OnDestroy { 

    myForm: FormGroup; 
    error = false; 
    errorMessage = ''; 

    private subscription: Subscription; 
    private customerIndex: number; 
    selectedCustomer: FirebaseObjectObservable<Customer[]>; 

    constructor(
    private fb: FormBuilder, 
    private route: ActivatedRoute, 
    private customerService: CustomerService, 
    private router: Router) { } 

    ngOnInit() { 

    this.subscription = this.route.params.subscribe((params: any) => { 
     this.customerIndex = params['key']; 
     this.selectedCustomer = this.customerService.getCustomer(this.customerIndex); 
    }) 
    **This is where I want to assign the values on my form to the customer object that i get back from the service** 

    this.myForm = this.fb.group({ 
     name: ['', Validators.required], 
     description: ['', Validators.required], 
     imagePath: ['', Validators.required], 
    }); 
    } 

    ngOnDestroy(){ 
    this.subscription.unsubscribe(); 
    } 

} 

Answer 1

您還需要訂閱您的客戶服務。

this.subscription = this.route.params.subscribe((params: any) => { 
      this.customerIndex = params['key']; 
      this.customerService.getCustomer(this.customerIndex).subscribe((res) => { 
       this.selectedCustomer = res; 
       //extra assignments with selectedCustomer object here. 
      }); 
     }) 

編輯：增值服務代碼

getCustomer(customerIndex: number) { 

    return this.af.database.object('/customer/' + customerIndex); 
}