Angular-使用角度服务获取数据

时间:2019-04-19 08:21:01

标签: angular angular-services

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

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 个答案:

答案 0 :(得分:2)

您忘记将Injectable装饰器添加到DataService类。

@Injectable()
export class DataService {

}

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

以下是JB Nizet的补充说明。

  • 您在OnInit中所有的订阅应以;而不是,结尾。

  • allData在组件中不作为属性存在。 <div *ngFor="let x of allData">不起作用。

答案 1 :(得分:1)

您可以尝试下面的代码或查看以下代码:API IN ANGULAR 7

$request->hasFile('test')