Javascript 如何将HTTP Angle 4/5请求绑定到html？

我从一个角度HTTPClient GET请求返回了一些原始JSON，我不确定现在如何将JSON对象的属性动态绑定到html

我通常认为只需将返回的JSON对象存储到一个变量中，然后使用点表示法在需要的地方引用它，但Angular似乎不能这样工作，因为我无法将http get请求设置为ngOnInit中的一个变量并引用它

当我的组件加载并成功登录到控制台时，我使用ngOnInit对其进行初始化，但是如何将其绑定到html中呢

app.component.ts：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'Contacts';
  constructor (private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.httpClient.get('**URL PATH RETURNING JSON OBJECT**')
    .subscribe((data) => {
      console.log(data));
  }
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';


import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML:

{{title}}
喜爱的联系人



{{contact.name}


{{contact.companyName}

试着这样做：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {
  title = 'Contacts';
  constructor (private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.httpClient.get('**URL PATH RETURNING JSON OBJECT**')
    .subscribe((data)=>{
         this.contacts = data;//I have assigned data here inside subscription
         console.log(data);
    });
  }
}

---

并引用

this.contacts

，方法与HTML中的方法相同您的

app.component.ts中似乎没有
contacts
变量

它应该是这样的：

export class AppComponent {
  title = 'Contacts';
  contacts: any[]; // Add variable
  constructor (private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.httpClient.get('**URL PATH RETURNING JSON OBJECT**')
    .subscribe((data)=>{
         console.log(data);
         this.contacts = data; // Once you get the data, assign the data returned to contacts
    });
  }
}

发布您在响应中获得的示例数据您还应该将联系人初始化为空数组，以确保在出现BigDataCase时避免任何未定义的错误非常感谢您的响应！运行此
/src/app/app.component.ts模块解析失败时出错：意外令牌（18:28）您可能需要适当的加载程序来处理此文件类型。
。当我在不使用
contacts=any[]
的情况下运行它时，它与添加到
ngOnInit
的
this.contatcts
一起工作。为什么这样不行？因为我可能最终需要对JSON对象进行排序。我想我找到了。你的答案有点错<代码>联系人=任何[]应为
联系人：任意[]这是有效的。这完全是一个疏忽，我觉得自己很傻。谢谢！但是，我正在尝试使用
contacts=any[]将其保存到我的
constructor（）
中的一个变量中并且它似乎不起作用。我得到了一个编译错误，我在这个线程的另一个答案上回答了这个错误。我猜你得到了答案
contacts:any[]
export class AppComponent {
  title = 'Contacts';
  contacts: any[]; // Add variable
  constructor (private httpClient: HttpClient) {}

  ngOnInit(): void {
    this.httpClient.get('**URL PATH RETURNING JSON OBJECT**')
    .subscribe((data)=>{
         console.log(data);
         this.contacts = data; // Once you get the data, assign the data returned to contacts
    });
  }
}