代码之家 › 专栏 › 技术社区 › newman

角度5:从未分配给变量的受试者处可观察到

subject observable typescript angular javascript

0

newman · 技术社区 · 8 年前

我有服务。ts文件在我的角度组件之间传递一个可观测值,我有一个组件上的点击事件传递给下面的组件的结果。

我的问题是我能 console.log 我的目标希望存储在我的 selectedContact 变量(见下文),但当我尝试分配 subscribe() 对我的 选定联系人 变量,然后将其绑定到我的HTML,它只显示为“[对象对象]。

这是我的代码:

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]

我错过了什么?谢谢

2 回复 | 直到 8 年前

1

2

Tung Tran 8 年前

我认为在html中,您可以绑定 this.selectedContact 到某个html组件。但是自从 这选定联系人 是一个对象,您必须像这样绑定到其属性: {{selectedContact.proppertyName }}

2

0

kshetline 8 年前

如果您这样做:

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

。。。你会看到你的对象,但它的格式不会那么好。您必须做更多的工作才能获得格式良好的输出。