Angular 5: 从 Subject 观察到的没有分配给变量

Question

我有一个 service.ts 文件在我的 Angular 组件之间传递一个 Observables，并且我有一个组件上的点击事件的结果被传递到下面的组件。

我的问题是我可以 console.log 我想要存储在我的 selectedContact 变量中的对象（见下文），但是当我尝试将 subscribe() 响应分配给我的 selectedContact 变量，然后将其绑定到我的 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))
  }

我得到 正确的 对象记录到控制台（来自其他组件的点击事件）。

但是当我运行这个：

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

...您会看到您的对象，但它的格式不会那么好。您将需要做更多的工作才能获得 well-formatted 输出。

Angular 5: 从 Subject 观察到的没有分配给变量

Angular 5: Observable from Subject not assigning to variable

javascript

subject

observable

typescript

angular