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);
  });

您的代码风格可能会导致项目混乱;我的意思是您不应该像现在这样将 componentsservices 混合在一起。将服务保留在组件之外是非常有益的,因为如果您必须更改 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