Question

我正在尝试在页面加载时向API发出HTTP请求，并在屏幕上显示响应文本。我正在使用Angular框架。

当前，当您按下按钮时，它可以按照我的期望工作。我希望按钮具有确切的功能，但是要使其在页面加载时自动发生。

//TypeScript
import { Component, OnInit } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';


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

export class ProfileComponent implements OnInit {



posts: Observable<String[]>;

  constructor(private http:HttpClient) {

  }

 public getPosts() {

  this.posts = this.http.get<any[]>('https://jsonplaceholder.typicode.com/posts');

  }


ngOnInit() {
  }

}

HTML
<button (click) = "getPosts()">GetPosts</button>

<div *ngFor="let post of posts | async">
  Name
  {{post | json}}

</div>

这给我一个带有按钮的页面。当我按下按钮时，会从API获取信息。我希望该API在页面加载后立即向我提供信息。

Answer 1

只需在ngOnInit上调用方法

    ngOnInit() {
           this.getPosts()
      }

或者您也可以在下面做类似的事情

    export class ProfileComponent implements OnInit {
    posts: Observable<String[]> = this.http.get<any[]>('https://jsonplaceholder.typicode.com/posts');

      constructor(private http:HttpClient) {

      }
    }

如何在Angular页面加载时发出HTTP请求（使用按钮）

1 个答案: