Javascript 来自主题/服务的Angular 4/5组件变量未绑定到HTML模板

我的app.component.ts文件中有一个变量，该变量通过我的services.ts文件从控制器传入

据我所见，通过Subject传递给组件的Object属性正在工作，因为我可以

console.log（this.selectedContact.name）

，它将完美地记录到控制台，这意味着它正确地存储到变量

selectedContact:any。但我似乎无法将它绑定到我的HTML中，我很好奇我可能遗漏了什么

以下是我尝试绑定到的视图的app.component.ts文件：

import { Component, OnInit } from '@angular/core';
import { ContactsListComponent } from '../contacts-list/contacts-list.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;

  constructor(private _apiService: ApiService) { }

  ngOnInit() { this.showContact()}

  showContact() {
    this._apiService.newContactSubject.subscribe(
      contact => {
         this.selectedContact = contact;
         console.log(this.selectedContact.name);
      });
  }
}

这是我的HTML文件（我试图绑定到的视图）：

<div id= 'contact-card' >
  <header>
  <button routerLink='/home'>< Contacts</button>
  </header>
  <section id= card-container>
    <img id ="largeContactPhoto" onerror="onerror=null;src='../assets/User Large/User — Large.png';"
         src={{selectedContact.largeImageURL}} />
    <h1> {{selectedContact.name}} </h1>
    <h2> {{selectedContact.companyName}} </h2>
    <ul>
      <hr>
      <li class="contact-data">
        <h3> Phone: </h3>
        {{selectedContact.phone.home}}
      <hr>
      </li>
      <li class="contact-data">
        <h3> Phone: </h3>
        {{selectedContact.phone.mobile}}
      <hr>
      </li>
      <li class="contact-data">
        <h3> Phone: </h3>
        {{selectedContact.phone.work}}
      <hr>
      </li>
      <li class="contact-data">
        <h3> Address: </h3>
        {{selectedContact.address.street}}<br>
        {{selectedContact.address.city}},{{selectedContact.address.state}} {{selectedContact.address.zipcode}}
      <hr>
      </li>
      <li class="contact-data">
        <h3> Birthdate: </h3>
        {{selectedContact.birthdate}}
      <hr>
      </li>
      <li class="contact-data">
        <h3> Email: </h3>
        {{selectedContact.email}}
      <hr>
      </li>
    </ul>
  </section>
</div>


<联系人
{{selectedContact.name}
{{selectedContact.companyName}



电话：
{{selectedContact.phone.home}



电话：
{{selectedContact.phone.mobile}



电话：
{{selectedContact.phone.work}



地址:
{{selectedContact.address.street}}

{{selectedContact.address.city}，{{selectedContact.address.state}{{{selectedContact.address.zipcode}



出生日期：
{{selectedContact.birthdate}



电邮：
{{selectedContact.email}




app.service.ts（点击事件数据传递至app.component.ts的位置：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import 'rxjs/add/operator/map';

@Injectable()
export class ApiService {

  //API URL
  private url: string = 'assets/api/contacts.json';

  public newContactSubject = new Subject<any>();

  //Initialize HttpClient for request
  constructor(private _http: Http) { }

  //Pull JSON data from REST API
  getContacts(): Observable<any> {
    return this._http.get(this.url)
    .map((response: Response) => response.json());
  }
  openSelectedContact(data) {
  this.newContactSubject.next(data);

  }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Subject'导入{Subject}；
导入'rxjs/add/operator/map'；
@可注射（）
出口级服务{
//API URL
私有url:string='assets/api/contacts.json'；
public newContactSubject=新主题

与此相比：


注意到突出显示的
的变化了吗？这使得每个打开和关闭标记现在都以灰色显示，而不是红色。我从未尝试使用安全导航操作符，因此我不确定这是否正常。我尝试过在
{{
和
}周围使用不同的间隔
但仍然不走运。
您需要数组还是对象？您应该准确键入您从服务中获得的内容。
这里您提到了一个数组：

selectedContact: any[] = [];

这里你提到一个物体

<h1> {{this.selectedContact.name}} </h1>

这将帮助您进行调试

此外，由于您的数据在服务接收之前显示在浏览器上，因此您将获得一个未定义的变量。请使用
？
或
*ngIf
（对于*ngIf，不要将您选择的联系人定义为一个数组开始）



或

{{this.selectedContact？.name}
您需要数组还是对象？您应该准确键入您从服务中获得的内容。
这里您提到了一个数组：

selectedContact: any[] = [];

这里你提到一个物体

<h1> {{this.selectedContact.name}} </h1>

这将帮助您进行调试

此外，由于您的数据在服务接收之前显示在浏览器上，因此您将获得一个未定义的变量。请使用
？
或
*ngIf
（对于*ngIf，不要将您选择的联系人定义为一个数组开始）



或

{{this.selectedContact？.name}
为什么要在数据插值中使用
这个
关键字？这是我的尝试。如果没有
这个
关键字，它仍然无法工作似乎
selectedContact
是一个数组，但你像对象一样使用它。你的控制台中是否出现任何JS错误？@Daniel W Strimpel我得到的唯一一个错误是
TypeError:无法读取html文件中未定义的属性'home'，但当我使用console.log时，却得到了相同的结果
console.log（selectedContact.phone.home`它在控制台中完美地显示出来。它只是没有绑定。为什么要在数据插值中使用
这个
关键字？这是我的尝试。如果没有
这个
关键字，它仍然无法工作
selectedContact
似乎是一个数组，但你使用它就像一个数组一样object您的控制台中是否出现任何JS错误？@Daniel W Strimpel我得到的唯一一个错误是
TypeError:无法读取html文件中未定义的属性“home”，但当我使用console.log时，会出现相同的错误
console.log（selectedContact.phone.home`它在控制台中完美地显示出来。它只是没有绑定。感谢您的回复。我正在等待一个对象。我已将
selectedContact:any[]=[]；
更改为
selectedContact:{}；
但它仍然不工作。我已尝试添加
*ngIf=“selectedContact”
到我的容器，它显示为完全空白…这意味着它无法到达容器…但它正在从组件登录到控制台。非常奇怪。你的控制台在哪里。log（）？语法应该是：
selectedContact:any；
。这不起作用的最后一个原因是您有另一个JavaScript错误。console.log（）位于showContact（）方法中，该方法在ngOnInit（）中调用。
showContact（）{this.\u apiService.newContactSubject.subscribe（数据=>{this.selectedContact=data；console.log（this.selectedContact.name）；当一切都像这样失败时，删除整个模板。然后执行
{{selectedContact | json}
在它里面。你会看到你是否得到了一些东西。至于？破坏你的编辑器，那么你的编辑器不好。这是一个有效的语法。如果你使用？，你必须在使用selectedContact的任何地方都使用它。我已经完全删除了所有内容，我只有一个
{selectedContact | json
<div id= 'contact-card' *ngIf="selectedContact">

<h1> {{this.selectedContact?.name}} </h1>