Angular 中的异步数据处理

Posted 2023-02-23

【中文标题】Angular 中的异步数据处理

【英文标题】：Async data handling in Angular

【发布时间】：2017-09-06 18:12:42

【问题描述】：

我正在尝试将本地 JSON 加载到我的组件中，但我无法将服务中的值加载到我的组件中。我可以在服务中看到 json 数据，但它在我的组件中未定义。有人看到我在这里做错了吗？谢谢。

这是console.log在服务和组件中的SS

interfaces.json

  "interfaces": 
    "eth" : "name" : "eth",
    "lte" : "name" : "lte",
    "wlc" : "name" : "wlc",
    "wlap" : "name" : "wlap"
  

interfaces.service.ts

import  Injectable  from '@angular/core';
import  Http  from '@angular/http';

@Injectable()
export class Interfaces 

  constructor(public http: Http) ;

  public getData() 
    return this.http.get('/assets/interfaces.json')
    .map((res) => res.json(); console.log(res); );
  ;

interfaces.component.ts

import  Component, OnInit  from '@angular/core';
import  Interfaces  from './interfaces.service';
import  Observable  from 'rxjs/Rx';

@Component(
  selector: 'interfaces',
  providers: [
    Interfaces
  ],
  template: `
    <ul *dropdownMenu class="dropdown-menu" role="menu">
      <li *ngFor="let interface of interfaces | async" role="menuitem">
        <a [routerLink]=" ['./interfaces/eth'] "routerLinkActive="active"
        [routerLinkActiveOptions]= "exact: true" class="dropdown-item" href="#">
        interface.nameMain Ethernet
        </a>
      </li>
    </ul>
  `,
)

export class InterfacesComponent implements OnInit 

  constructor(public interfaces: Interfaces) 

  public ngOnInit() 
    this.interfaces.getData().subscribe((data) =>  this.data = data; console.log(data); );

  

【参考方案1】：

它是undefined 的原因是您没有在map 内返回您的响应，而不是地图不起作用..

.map((res) => console.log(res); return res.json(); ); // missing return here

或不带括号：

.map((res) => res.json());

【参考方案2】：

我不知道有什么问题，因为我是 angular2 的新手，但这对我有用。

interfaces.service.ts

import  Injectable  from '@angular/core';
import  Http  from '@angular/http';

@Injectable()
export class Interfaces 

  constructor(public http: Http) ;

  public getData() 
    return this.http.get('/assets/interfaces.json');
  

interfaces.component.ts

import  Component, OnInit  from '@angular/core';
import  Interfaces  from './interfaces.service';
import  Observable  from 'rxjs/Rx';

export class InterfacesComponent implements OnInit 

  constructor(public interfaces: Interfaces) 

  public ngOnInit() 
    this.interfaces.getData().subscribe((data) => 
          this.data = data;
          console.log(data);
    );
  

【讨论】：

嘿！你是对的，没有 .map() 它可以工作。我想我必须在组件或服务中只使用一次，否则会弄乱数据...感谢您的快速响应！