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

角向移动积垢功能到服务

angular

1

DNorthrup · 技术社区 · 9 年前

map 和 subscribe

我的“get”函数

getClients() : Observable<Client[]> {
  return this.authService.get('clients')
    .map(res => res.json())
    .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
};

client service

import { Injectable }     from '@angular/core';
import { Client }     from '../client/client';
import {Observable} from 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Angular2TokenService } from "angular2-token";

@Injectable()
export class ClientService{

  constructor(private authToken: Angular2TokenService) {
  }

    getClients() : Observable<Client[]> {
      return this.authToken.get('clients')
        .map(res => res.json())
        .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
    };
}

然后我修改我的组件,使其类似于

  constructor(private clientService: ClientService) { }
  clients: Client[];

  ngOnInit() {
    this.clientService.getClients();
  }

  getClients() : Observable<Client[]> {
    return this.clientService.getClients();
  }

是吗 .map() 这个 res

根据评论更新

import { Injectable }     from '@angular/core';
import { Client }     from '../client/client';
import {Observable} from 'rxjs/Rx';

// Import RxJs required methods
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import { Angular2TokenService } from "angular2-token";

@Injectable()
export class ClientService{

  constructor(private authToken: Angular2TokenService) {
  }

  getClients() {
    this.authToken.get('clients')
      .map(res => res.json())
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  };

}

组成部分

import { Component, Input, OnInit } from '@angular/core';
import { Client } from "./client";
import { Angular2TokenService } from "angular2-token";
import { Observable } from "rxjs/Observable";
import { ClientService } from "../services/client.service";

@Component({
  selector: 'app-client',
  templateUrl: './client.component.html',
  styleUrls: ['./client.component.sass']
})
export class ClientComponent implements OnInit {

  constructor(private
                // authService: Angular2TokenService
  clientService: ClientService
  ) {
  }

  clients: Client[];

  ngOnInit() {
    this.getClients();
  }

  getClients() : Observable<Client[]> {
    this.clientService.getClients()
      .subscribe(res => {
        console.log(res)
      });
  }

  // getClients(): Observable<Client[]> {
  //   this.authService.get('clients')
  //     .map(res => res.json()).subscribe(
  //       res => this.clients = res,
  //       error => console.log(error)
  //     );
  // }
};

我确实需要它。我目前收到3个错误(2个在服务上,1个在组件上) a function whose declared type is neither 'void' nor 'any' must return a value.

2 回复 | 直到 9 年前

1

2

Jorawar Singh 9 年前

您需要订阅getClients方法才能查看结果

this.clientService.getClients().subscribe((data) => console.log(data));

或者像你现在做的那样

constructor(private clientService: ClientService) { }
  clients: Client[];

ngOnInit() {
  this.clientService.getClients().subscribe((data) => {
  console.log(data);
},(err) => {
  console.log(err);
});
}

getClients() : Observable<Client[]> {
   return this.clientService.getClients();
}

2

1

Pardeep Jain 9 年前

你只需要 subscribe 为了得到这样的期望输出,我认为你需要在你的组件中改变这个

constructor(private clientService: ClientService) { }
  clients: Client[];

  ngOnInit() {
    this.getClients();
  }

  getClients() : {
        this.clientService.getClients()
           .subscribe(res => {
              console.log(res)
           });
      }

我知道。映射res,然后在组件内订阅?

.map() .json() format from the map()函数,为了从服务中获得组件级别的响应,您需要订阅该可观察对象。