【问题标题】:this.data.getUsers(...).subscribe is not a functionthis.data.getUsers(...).subscribe 不是函数
【发布时间】:2019-04-14 17:07:30
【问题描述】:

从 API 获取详细信息并尝试在打印用户列表时列出相同的获取错误可以使用相同的代码进行打印。

下面是我的home.component.ts

constructor(private formBuilder: FormBuilder, private data: DataService) { }
ngOnInit() {
this.data.getUsers().subscribe(data => {
        this.users = data
        console.log(this.users);
      }
    );
}

以下是我的数据服务代码

getUsers() {

    return this.http.get('https://reqres.in/api/users');
  }

下面是我正在尝试的html循环

<ul *ngIf="users">
  <li *ngFor="let user of users.data">
    <img [src]="user.avatar">
    <p>{{ user.first_name }} {{ user.last_name }}</p>
  </li>
</ul>

【问题讨论】:

  • 错误是什么?

标签: node.js angular angular7


【解决方案1】:

从你的代码Working Stackblitz重新检查这个

component.ts

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'my-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  users;
  constructor(private data: DataService){}
  ngOnInit() {
    this.data.getUsers().subscribe(data => {
      this.users = data ;
    })
  }
}

service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {

  constructor(private http: HttpClient) { }
  getUsers() {
    return this.http.get('https://reqres.in/api/users');
  }

}

component.html

<ul *ngIf="users">
  <li *ngFor="let user of users.data">
    <img [src]="user.avatar">
    <p>{{ user.first_name }} {{ user.last_name }}</p>
  </li>
</ul>

【讨论】:

    【解决方案2】:

    工作...我清除了 npm 的缓存并且它工作了..

    【讨论】:

      猜你喜欢
      • 2019-01-26
      • 2018-09-28
      • 2017-11-03
      • 2018-11-10
      • 2018-10-05
      • 2021-11-28
      • 2018-12-25
      • 2018-08-27
      • 1970-01-01
      相关资源
      最近更新 更多