时间戳

首页 > 解决方案 > Angular - 使用 Angular 服务获取数据

angular - Angular - 使用 Angular 服务获取数据

问题描述

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

数据服务.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 的所有参数：(？)。” . 请帮帮我。

标签： angularangular-services

解决方案

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

@Injectable()
export class DataService {

}

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

感谢 JB Nizet，下面的附加说明。

  • 您的所有订阅都OnInit应该以 a 结尾，;而不是 a ,。

  • allData在您的组件中不作为属性存在。<div *ngFor="let x of allData">不会工作。

推荐阅读