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

Question

我从一个有角度的 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：

<div id= contacts-container>
  <header><h1> {{ title }} </h1></header>
  <div id= "favoritesContainer">
    <p>Favorite Contacts</p>
  </div>
  <ul>
    <li *ngFor="let contact of contacts">
      <div *ngIf= "!contact.isFavorite">
          <img src={{contact.smallImageURL}} />
          <h3><img src="../assets/Favorite Star (True)/Favorite — True.png">{{ contact.name }} </h3>
          <br>
          <p>{{ contact.companyName }}</p>
          <hr>
      </div>
    </li>
  </ul>
</div>

Answer 1

您的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
    });
  }
}

Answer 2

试试这样：

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

并以与 HTML 相同的方式引用 this.contacts