要通过JSONP获取对象列表,可以使用Angular的HttpClient模块和JSONP模块。下面是一个使用Angular 7的示例代码:
npm install @angular/common@7.0.0 --save
npm install @angular/compiler@7.0.0 --save
npm install @angular/core@7.0.0 --save
npm install @angular/http@7.0.0 --save
npm install @angular/platform-browser@7.0.0 --save
npm install @angular/platform-browser-dynamic@7.0.0 --save
npm install @angular/router@7.0.0 --save
npm install @angular/forms@7.0.0 --save
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class DataService {
constructor(private http: HttpClient) { }
getData(url: string): Observable {
return this.http.jsonp(url, 'callback');
}
}
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-list',
template: `
- {{ item.name }}
`
})
export class ListComponent implements OnInit {
items: any[];
constructor(private dataService: DataService) { }
ngOnInit() {
const url = 'https://api.example.com/items?callback=JSONP_CALLBACK';
this.dataService.getData(url).subscribe(data => {
this.items = data;
});
}
}
在上面的示例中,我们使用了一个ul元素来显示对象列表。我们使用*ngFor指令循环遍历items数组,并在每个li元素中显示对象的名称。
请确保将url变量替换为你自己的JSONP请求URL。在URL末尾添加callback参数,并将其值设置为'JSONP_CALLBACK',以告诉服务器返回JSONP响应。
以上是一个基本的示例,你可以根据自己的需求进行修改和扩展。记得在使用JSONP时要考虑到安全性问题,并在服务器端进行必要的验证和过滤。