javascript-使用Angular 2显示来自JSON的数据-可观察和异步

2019-10-26 02:44:37 阅读：204 来源： 互联网

标签：angular asynchronous ngif json javascript

我有一个简单的Angular 2服务,正在调用本地JSON文件.我可以在general.service.ts中的.map函数中将对象添加到console.log.但是,由于异步调用的性质,我似乎无法从对象中打印出单个键或值.这是我的代码.

我知道我需要包含* ngIf,因为它是异步的.但是,即使我已经将ngIf与引用了component.ts的’generalInfo’一起使用了

一般服务

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

import { General } from '../interfaces/general.interface'

@Injectable()
export class GeneralService {
  private dataAPI = '../../assets/api.json';

  constructor(private http: Http) {

  }

  getGeneralData() : Observable<General> {
    return this.http.get(this.dataAPI)
      .map((res:Response) => { res.json(); console.log(res.json())})
      .catch((error:any) => Observable.throw(error.json().error ||     'Server error'));
  }
}

header.component.ts

import { Component, OnInit, DoCheck } from '@angular/core';
import 'rxjs/add/operator/map';
import { GeneralService } from '../../services/general.service';

@Component({
  selector: 'header',
  templateUrl: `./header.component.html`
})

export class headerComponent implements OnInit{

  public generalInfo : any;
  public name : string;

  constructor(
    private headerblock: GeneralService
  ) {}

  //Local Properties
  header;

  loadHeader() {
    this.headerblock.getGeneralData()
      .subscribe(
        generalInfo => {
          this.generalInfo = generalInfo;
          this.name = this.generalInfo.name
        },
        err => {
          console.log(err);
        }
      );

  }

  ngOnInit() {
    this.loadHeader();
  }
}

header.component.html

<div class="container">
  <div *ngIf="generalInfo">
     {{name}}
  </div>
</div>

尽管现在有了此代码-它不会进入if语句中.我不确定为什么这行不通？

解决方法:

* ng如果未执行,则导致您的map函数不返回任何内容.

因此,在您的订阅函数中,传入的值是不确定的！

您必须在地图函数中返回一些内容：

.map((res:Response) => { console.log(res.json()); return res.json(); })

并在模板中像这样使用它：

{{ generalInfo.name }}

假设generalInfo具有一个名为name的属性.

标签：angular,asynchronous,ngif,json,javascript
来源： https://codeday.me/bug/20191026/1933519.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-使用Angular 2显示来自JSON的数据-可观察和异步