angular - 如何从 Angular 7 中的 api 获取请求
问题描述
我正在尝试HttpClient
在 Angular 7 中使用 JSON。代码工作正常,但我正在尝试实现注释代码并停止使用CONST IMAGES
并直接从 API 获取这些数据,我还不能这样做。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable()
export class ImageService {
// public _url: string = "https://jsonplaceholder.typicode.com/photos";
constructor(
// public http: HttpClient
) {}
theImages = [];
// IMAGES = [];
getImages(){
// this.IMAGES = this.http.get(this._url);
return this.theImages = IMAGES.slice(0);
}
getImage(id: number){
// this.IMAGES = this.http.get(this._url);
return IMAGES.slice(0).find(image => image.id == id);
}
}
const IMAGES = [
{
"albumId": 1,
"id": 1,
"title": "accusamus beatae ad facilis cum similique qui sunt",
"url": "https://via.placeholder.com/600/92c952",
"thumbnailUrl": "https://via.placeholder.com/150/92c952"
},
...
错误代码是:
error TS2740: Type 'Observable<Object>' is missing the following properties from type 'any[]': length, pop, push, concat, and 25 more.
解决方案
你需要从方法中返回一个Observable
然后订阅ImageService
实例的方法返回的数据。
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { first } from 'rxjs/operators';
@Injectable()
export class ImageService {
public _url: string = "https://jsonplaceholder.typicode.com/photos";
constructor(public http: HttpClient) {}
getImages() {
return this.http.get(this._url);
}
getImage(id: number) {
return this.http.get(this._url)
.pipe(first(item => item.id === id));
}
}
从你项目的另一个地方
...
imageService.getImages().subscribe(images => /*...*/)
...
推荐阅读
- vba - Excel VBA日期时间自动添加
- git - Git 忽略 public/index.html
- eclipse - 在eclipse中查看git中的文件变化
- javascript - TypeError:无法读取 JSON 上未定义 Ajax 调用的属性“值”
- vb.net - VB.NET 中的 MagSetImageScalingCallback 定义?
- c# - 使用套接字在互联网上发送数据
- jquery - Jtable,jQuery selectionchange 不起作用
- mysql - MySQL Concat 和类似命令的问题
- ios - 某些 UI 元素无法在 iOS 模拟器中点击/单击
- matplotlib - 使用 ax.set_xlim() 后 matplotlib xticks 错位