将Wordpress API数据提取到Angular 7中

我想使用Wordpress作为后端（仅用于CMS），我试图将帖子数据拉入我的angular 7应用程序，但帖子信息没有显示。我可以在控制台中看到数据，但无法在组件中提取数据。有什么建议吗

app.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'altair-global';

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('http://altair-global.local/wp-json/wp/v2/posts?filter[posts_per_page]=50').subscribe(data => {
      console.log(data);
    });
  }
}

<div class="container">
  <h4 class="text-center">Insight Page</h4>
  <ul>
    <li *ngFor="let post of posts | async">
      <h4>{{ post.title.rendered }}</h4>
      {{ post.date_gmt | date }}
    </li>
  </ul>
</div>

insight.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'altair-global';

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    // Make the HTTP request:
    this.http.get('http://altair-global.local/wp-json/wp/v2/posts?filter[posts_per_page]=50').subscribe(data => {
      console.log(data);
    });
  }
}

<div class="container">
  <h4 class="text-center">Insight Page</h4>
  <ul>
    <li *ngFor="let post of posts | async">
      <h4>{{ post.title.rendered }}</h4>
      {{ post.date_gmt | date }}
    </li>
  </ul>
</div>

洞察页面


{{post.title.rendered}
{{post.date_gmt|date}

首先尝试将api调用作为服务。创建api.service.ts

export  class  APIService {
    constructor(private  httpClient:  HttpClient) {}
    getPosts(){
      return  this.httpClient.get('http://altair-global.local/wp-json/wp/v2/posts?filter[posts_per_page]=50');
    }
}

将其导入insight.component.ts文件，如下所示：

import { APIService } from  '../api.service'; (file path may vary)

您的insights.component应该类似于以下内容：

import { Component, OnInit } from  '@angular/core';
import { APIService } from  '../api.service';

@Component({
    selector:  'app-insights',
    templateUrl:  './insight.component.html',
    styleUrls: ['./insight.component.css']
})

export  class  InsightComponent  implements  OnInit {

    private  posts:  Array<object> = [];
    constructor(private  apiService:  APIService) { }
    ngOnInit() {
        this.getPosts();
    }
    public  getPosts(){
        this.apiService.getPosts().subscribe((data:  Array<object>) => {
            this.posts  =  data;
            console.log(data);
        });
    }
}

从'@angular/core'导入{Component，OnInit}；
从“../api.service”导入{APIService}；
@组成部分({
选择器：“应用程序洞察”，
templateUrl:“./insight.component.html”，
样式URL:['./insight.component.css']
})
导出类InsightComponent实现OnInit{
私人职位：数组=[]；
构造函数（私有apiService:apiService）{}
恩戈尼尼特（）{
这是getPosts（）；
}
公共邮政（{
this.apiService.getPosts（）.subscribe（（数据：数组）=>{
this.posts=数据；
控制台日志（数据）；
});
}
}

---

希望这有帮助

首先尝试将api调用作为服务。创建api.service.ts

export  class  APIService {
    constructor(private  httpClient:  HttpClient) {}
    getPosts(){
      return  this.httpClient.get('http://altair-global.local/wp-json/wp/v2/posts?filter[posts_per_page]=50');
    }
}

将其导入insight.component.ts文件，如下所示：

import { APIService } from  '../api.service'; (file path may vary)

您的insights.component应该类似于以下内容：

import { Component, OnInit } from  '@angular/core';
import { APIService } from  '../api.service';

@Component({
    selector:  'app-insights',
    templateUrl:  './insight.component.html',
    styleUrls: ['./insight.component.css']
})

export  class  InsightComponent  implements  OnInit {

    private  posts:  Array<object> = [];
    constructor(private  apiService:  APIService) { }
    ngOnInit() {
        this.getPosts();
    }
    public  getPosts(){
        this.apiService.getPosts().subscribe((data:  Array<object>) => {
            this.posts  =  data;
            console.log(data);
        });
    }
}

从'@angular/core'导入{Component，OnInit}；
从“../api.service”导入{APIService}；
@组成部分({
选择器：“应用程序洞察”，
templateUrl:“./insight.component.html”，
样式URL:['./insight.component.css']
})
导出类InsightComponent实现OnInit{
私人职位：数组=[]；
构造函数（私有apiService:apiService）{}
恩戈尼尼特（）{
这是getPosts（）；
}
公共邮政（{
this.apiService.getPosts（）.subscribe（（数据：数组）=>{
this.posts=数据；
控制台日志（数据）；
});
}
}

希望这有帮助

这将帮助您：

首先，您需要贴花：

posts: any;

然后输入您的http代码：

this.posts = data;
console.log(this.posts);

有关更多信息：

这将帮助您：

首先，您需要贴花：

posts: any;

然后输入您的http代码：

this.posts = data;
console.log(this.posts);

---

有关更多信息：

您是否可以更新您的示例，将http调用实际分配给组件变量？在本例中，

posts

是未定义的。您是否可以更新您的示例，将http调用实际分配给组件变量？在本例中，

帖子

未定义