Angular

Question

我正在尝试获取详细信息。所以，这是我的代码。

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 中遇到一些语法错误和 "Can't resolve all parameters for DataService: (?)." 等其他错误。请大家帮帮我。

Answer 1

您忘记将 Injectable 装饰器添加到您的数据服务 class。

@Injectable()
export class DataService {

}

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

感谢 JB Nizet，以下补充说明。

您 OnInit 中的所有订阅都应以 ; 结尾，而不是 ,。
allData 在您的组件中不存在，因为属性。 <div *ngFor="let x of allData"> 行不通。

Answer 2

您可以尝试下面的代码或查看：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>

Angular - 使用 angular 服务获取数据

Angular - Fetch data using angular service

angular-services