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

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

angular-components object angular json javascript

-1

newman · 技术社区 · 7 年前

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

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

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

应用程序。组成部分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));
  }
}

应用程序。单元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>

2 回复 | 直到 7 年前

Ikhlak S. Shantanu Sharma 7 年前

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

它应该是这样的:

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

user1608841 7 年前

尝试以下操作:

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中相同的方式