Angular - выборка данных с использованием службы Angular - PullRequest
Новая
       21

Angular - выборка данных с использованием службы Angular

0 голосов
/ 19 апреля 2019

Я пытаюсь получить детали. Итак, вот мой код.

data.service.ts 

 import { Injectable } from '@angular/core';
 import { Http, Headers } from '@angular/http';
 import 'rxjs/add/operator/map';
 import { HttpClient,HttpErrorResponse } from 
 '@angular/common/http';
 import { ActivatedRoute, Router } from '@angular/router';


 export class DataService {

 constructor(private http: HttpClient) {}

 userdetails() {
  return this.http.get(`http://jsonplaceholder.typicode.com/users`);
  }

}

home.component.ts 

  import { Component, OnInit } from '@angular/core';
  import { DataService } from '../data.service';
  import { ActivatedRoute, Router } from '@angular/router';
  import { HttpClient } from '@angular/common/http';
  import { userInfo } from 'os';
  @Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
  })
  export class HomeComponent implements OnInit {
  user:any

  constructor(private data: DataService) { }

  ngOnInit()
   {
     this.data.userdetails().subscribe(
      allData => {
      this.user = allData;
      return this.user;
   });

   }
   }

home.component.html 

 <div *ngFor="let x of allData">
   {{{x.name}}
 </div>
 <router-outlet></router-outlet>

Я получаю некоторую синтаксическую ошибку в home.component.ts и другую ошибку, например «Не удается разрешить все параметры для DataService: (?).» , Пожалуйста, помогите мне, ребята.

Ответы [ 2 ]

2 голосов
/ 19 апреля 2019

Вы забыли добавить Injectable декоратор в свой класс DataService. 

@Injectable()
export class DataService {

}

https://angular.io/api/core/Injectable

Дополнительные примечания ниже благодаря JB Nizet.

  • Все ваши подписки в вашем OnInit должны заканчиваться на ;, а не ,.

  • allData не существует как свойство в вашем компоненте. <div *ngFor="let x of allData"> не будет работать.

1 голос
/ 19 апреля 2019

Вы можете попробовать код ниже или видно: API IN ANGULAR 7 

File servive when request API, you need add
    const httpOptions = {
      headers:new HttpHeaders({'Content-Type':'application/json'})
    };

    /*
    * METHOD POST
    */
    sendpost(value: any) {
        return this.http.post<any>('http://jsonplaceholder.typicode.com/posts', value,httpOptions)
            .pipe(map(user => {
                return user;
            }));
    }

    /**
     * METHOD GET
     */
    getdetails(){
        return this.http.get<any>('http://jsonplaceholder.typicode.com/users')
            .pipe(map(item => {
                return item;
            }));
    }

 ------------------------------------------------------------------------------------------------ 
File HomeComponent.ts: you import file serivice
import {UserService} from '../_services/user.services'
dataItem:any = {} 
 constructor(private _userService:UserService){
       this._userService.getdetails().subscribe(item=>{
            console.log(item);
            this.dataItem=item;
        })
 }
 
 
------------------------------------------
show HomeComponent.html

<ul *ngIf="dataItem?.length>0">
    <li *ngFor='let item of dataItem'>
        {{item.name}} - {{item.username}}
    </li>
</ul>
...