Question

我正在努力将我的CRUD功能迁移到服务，这是我觉得他们属于的地方。我认为这与我对map和subscribe等缺乏理解有关。

我的'获取'功能

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

这是Angular2-Token提供的HTTPWrapper。它与在组件中发布的预期结果完全相同。但是，我想将其移至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();
  }

现在我在每次加载页面时都收到一个Uncaught错误，但编译工作正常。

我确实相信这是因为我过度简化了它，但我不确定如何为该组件适当地“订阅”它。

我是.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)
  //     );
  // }
};

我确实需要它。我目前收到a function whose declared type is neither 'void' nor 'any' must return a value.

的3个错误（服务2个，组件1个）

上次只是'返回'组件中的值解析了它，但不确定服务应该是什么样的。

Answer 1

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

e.g

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

Answer 2

您需要subscribe到您的观察点才能获得所需的输出，我认为您需要在组件中更改此内容

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

  ngOnInit() {
    this.getClients();
  }

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

我是.map（）res，然后在组件中订阅吗？

.map()从流中返回observable，然后从map（）函数返回.json()格式，为了从服务中获取组件级别的响应，您需要订阅该Observable。

角度移动CRUD功能服务

2 个答案: