角度5：可從主題觀察到，未分配給變量

Question

我有一個service.ts文件，在我的Angular組件之間傳遞了Observables，並且我將一個組件上的click事件的結果傳遞給了下面的組件。

我的問題是我可以console.log將要存儲在我的selectedContact變量中的對象（請參見下文），但是當我嘗試為我的selectedContact變量分配subscribe()響應，然后將其綁定到HTML時，它只是顯示為`[object Object]。

這是我的代碼：

import { Component, OnInit } from '@angular/core';
import { AppComponent } from '../app.component';
import { ApiService } from '../api.service';

@Component({
  selector: 'app-contact-details',
  templateUrl: './contact-details.component.html',
  styleUrls: ['./contact-details.component.scss']
})
export class ContactDetailsComponent implements OnInit {

  selectedContact: any[] = [];

  error: string;

  constructor(private _apiService: ApiService) { }

  ngOnInit() { this.showContact() }

  showContact() {
  this._apiService.newContactSubject.subscribe(
    data => this.selectedContact = data)
  }
}

當我運行這個：

  showContact() {
  this._apiService.newContactSubject.subscribe(
    data => console.log(data))
  }

我將正確的對象日志記錄到控制台（其他組件的click事件）。

但是當我運行這個：

  showContact() {
  this._apiService.newContactSubject.subscribe(
    data => this.selectedContact = data)
  }

我得到了[Object Object]

我想念什么？ 謝謝！！！

Answer 1

我認為在html中，您可以將this.selectedContact綁定到某些html組件。 但是由於this.selectedContact是一個對象，因此您必須像這樣綁定到它的屬性： {{selectedContact.proppertyName }}

Answer 2

如果您這樣做：

showContact() {
  this._apiService.newContactSubject.subscribe(
  data => this.selectedContact = JSON.stringify(data))
}

...您會看到您的對象，但是它不會被很好地格式化。 您必須做更多的工作才能獲得格式正確的輸出。