WordPress Rest Api post 正在获取
Wordpress Rest Api post fetching
我正在尝试显示我在 wordpress 网站上的所有帖子。目前有2个帖子,你可以在json文件中看到:
View
export class HomePage {
url: string = ‘http://feederhorgasz.000webhostapp.com/wp-json/wp/v2/posts?_embed?filter[orderby]=date&order=asc1’;
items: any;
constructor(public navParams: NavParams,public navCtrl: NavController, private http:Http) {
console.log('Passed params', navParams.data);
}
ionViewDidEnter() {
this.http.get( this.url )
.map(res => res.json())
.subscribe(data =>
{
this.items = data;
console.log(“átadott wp api”,data);
});
}
然而,当我试图从 json 中读取时,它只列出了一个对象。 (我可以在日志中看到它)
那是因为您告诉 Angular 从结果中获取单个值。 this.items = data;
其中 items: any;
能够存储一个值,您必须定义您期望的是一组数据,而不仅仅是一个对象。所以简单的答案是:
// By adding [] it will be concidered an array
items: any[];
this.http.get(this.url)
.map(res => res.json())
.subscribe(data: any[] => {
//Line below will throw error if it not defined as an array
this.items = data;
console.log(“átadott wp api”, data);
});
您的代码风格可能会导致项目混乱;我的意思是您不应该像现在这样将 components
和 services
混合在一起。将服务保留在组件之外是非常有益的,因为如果您必须更改 http.get
方法之一,这将减少工作量;下线。我将添加您理想中应该拥有的片段。
Homepage Component
export class HomePage {
items: Type[];
constructor(public navParams: NavParams, public navCtrl: NavController, private posts: HomepageService) {
console.log('Passed params', navParams.data);
}
ionViewDidEnter() {
this.post.getPosts().subscribe(data: Type[] => {
this.items = data;
console.log(“átadott wp api”, data);
});
}
HomepageService
@Injectable()
export class HomepageService {
url: string = "http://feederhorgasz.000webhostapp.com/wp-json/wp/v2/posts?_embed?filter[orderby]=date&order=asc1";
constructor(private http: Http) {}
getPosts(): Observable < Type[] > {
return this.http.get(this.url)
.map(res => res.json() as Type[])
.catch((err: Response) => Observable.throw(console.log(err)));
}
如你所见,如果你想改变端点的URL,你只需要更新单个文件;并非您编写该服务的所有组件。
Class (Type
)
您还应该使用 classes
映射响应 JSON,以便 Angular 可以将其作为对象而不是某种类型的字符串进行交互。 Class
我正在尝试显示我在 wordpress 网站上的所有帖子。目前有2个帖子,你可以在json文件中看到: View
export class HomePage {
url: string = ‘http://feederhorgasz.000webhostapp.com/wp-json/wp/v2/posts?_embed?filter[orderby]=date&order=asc1’;
items: any;
constructor(public navParams: NavParams,public navCtrl: NavController, private http:Http) {
console.log('Passed params', navParams.data);
}
ionViewDidEnter() {
this.http.get( this.url )
.map(res => res.json())
.subscribe(data =>
{
this.items = data;
console.log(“átadott wp api”,data);
});
}
然而,当我试图从 json 中读取时,它只列出了一个对象。 (我可以在日志中看到它)
那是因为您告诉 Angular 从结果中获取单个值。 this.items = data;
其中 items: any;
能够存储一个值,您必须定义您期望的是一组数据,而不仅仅是一个对象。所以简单的答案是:
// By adding [] it will be concidered an array
items: any[];
this.http.get(this.url)
.map(res => res.json())
.subscribe(data: any[] => {
//Line below will throw error if it not defined as an array
this.items = data;
console.log(“átadott wp api”, data);
});
您的代码风格可能会导致项目混乱;我的意思是您不应该像现在这样将 components
和 services
混合在一起。将服务保留在组件之外是非常有益的,因为如果您必须更改 http.get
方法之一,这将减少工作量;下线。我将添加您理想中应该拥有的片段。
Homepage Component
export class HomePage {
items: Type[];
constructor(public navParams: NavParams, public navCtrl: NavController, private posts: HomepageService) {
console.log('Passed params', navParams.data);
}
ionViewDidEnter() {
this.post.getPosts().subscribe(data: Type[] => {
this.items = data;
console.log(“átadott wp api”, data);
});
}
HomepageService
@Injectable()
export class HomepageService {
url: string = "http://feederhorgasz.000webhostapp.com/wp-json/wp/v2/posts?_embed?filter[orderby]=date&order=asc1";
constructor(private http: Http) {}
getPosts(): Observable < Type[] > {
return this.http.get(this.url)
.map(res => res.json() as Type[])
.catch((err: Response) => Observable.throw(console.log(err)));
}
如你所见,如果你想改变端点的URL,你只需要更新单个文件;并非您编写该服务的所有组件。
Class (
Type
)
您还应该使用 classes
映射响应 JSON,以便 Angular 可以将其作为对象而不是某种类型的字符串进行交互。 Class