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

Question

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

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

general.service.ts

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 语句。我不确定为什么这不起作用？

Answer 1

*ngIf 没有执行，因为你的 map-函数没有 return 东西。

因此在您的 subscribe 函数中，传入值是 undefined!

你必须 return 你的地图函数中的一些东西：

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

在你的模板中，像这样使用它：

{{ generalInfo.name }}

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

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

Show data from JSON Using Angular 2 - Observable and async

javascript

json

asynchronous

angular-ng-if

angular