node.js - this.data.getUsers(...).subscribe 不是函数
问题描述
从 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>
解决方案
从您的代码Working Stackblitz重新检查这一点
组件.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 ;
})
}
}
服务.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');
}
}
组件.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>
推荐阅读
- c - 从用户输入中计算单词
- multi-tenant - 取消订阅功能在 SAP 云平台 CF 上不适用于多租户 SAAS 应用程序
- python - Selenium 从服务器获取 url 地址响应
- javascript - 与 @babel/env 和 @babel/preset-env 之间的 babel 预设配置混淆
- nginx - 设置两个单独的配置但具有相同的域
- pointers - 当 i := &b 时,'&i' 是什么意思
- python - 在python中,如何将数据从excel复制到网站?
- asp.net-core - 针对第三方 API 的 OAuth 2 三足身份验证
- c# - 我怎样才能用 linq 改进这个?
- java - 我创建了一个没有任何表和数据的空数据库