角度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))
}

...您会看到您的对象，但是它不会被很好地格式化。 您必须做更多的工作才能获得格式正确的输出。