Question

调用GET请求以访问wordpress api。在页面使用Angular离子应用程序加载页面时，我将如何显示数据。

我可以获得我想要的帖子列表，但是只有当我在按钮上使用a（单击）来调用HTML中的方法时，才可以。我已经完成了有关Udemy的课程，这是我首次尝试构建带有角度的离子应用程序，因此我什至不需要该方法？

HTML

<ion-content>

  <button (click)="onGetPosts()">Get Posts</button>
  <ion-list>

    <ion-item *ngFor="let post of posts">
      <ion-title>
        {{ post.title.rendered }}
      </ion-title>
    </ion-item>
  </ion-list>

</ion-content>

for-sale.page.ts

export class ForSalePage implements OnInit {

  posts: any;

  constructor(private saleService: ForSaleService) { }


  ngOnInit() {

  }

  onGetPosts() {
    this.saleService.getPosts()
      .subscribe(
        (posts: any) => this.posts = posts,
      );

  }
}

for-sale.service.ts

export class ForSaleService {

  posts: any;


  constructor(private http: HttpClient) { }

  getPosts() {
    return this.posts = this.http.get('http://***/wp-json/wp/v2/posts');

  }

}

因此，单击按钮然后在* NgFor中对所需数据进行字符串插值时，将按预期检索帖子列表。但是我只能首先单击按钮来加载数据。

什么样的ID是指打开页面后立即加载的所有数据。

我怀疑我可能不需要某种方法？因为这是唯一的页面，所以此数据是必需的，但是我找不到其他方法。

谢谢

Answer 1

在ngOnInit（）中调用方法

ngOnInit() {
   this.onGetPosts()
}

Answer 2

看看Angular Lifecycle Hooks：

使用此挂钩，您可以在组件的不同生命周期内执行代码。

在您的情况下，OnInit应该起作用。

  import { OnInit } from '@angular/core';

  export class ForSalePage implements OnInit {

  posts: any;

  constructor(private saleService: ForSaleService) { }


  ngOnInit() {
    this.saleService.getPosts()
      .subscribe(
        (posts: any) => this.posts = posts,
      );
  }

}

如何用HTML调用（click）=“ method（）”以外的方法

2 个答案: