HTTP-запрос на заполнение массива Angular при загрузке приложения

Question

Я сделал простое приложение для корзины покупок с angular 9.

Я запрашиваю сервер с HTTP-запросом, чтобы получить список всех продуктов.

Все работает нормально однако единственный способ получить список продуктов - использовать событие click.

функция

  productList : any;


  sendGetRequest(){
    this.http.get('http://localhost/ajax.php').subscribe((productList)=>{
        //console.log(productList);
       this.productList=productList;
    });

}

По этой причине я не могу запустить эту функцию внутри своего компонента, но если я используйте кнопку в HTML, она работает.

<app-product data-ng-init="sendGetRequest()" (productAdded)="addProductToCart($event)" [products]="productList"> </app-product>
<app-cart  [products]="cartProductList" (productRemoved)="removeProduct($event)" class="cart"> </app-cart>
<button (click)="sendGetRequest()">Request</button>

Я не хочу использовать кнопку. До этого список продуктов просто набирался в коде Json. Но теперь он получает продукты из API, которые запрашивают БД.

Как запустить эту функцию, когда приложение загружается не тогда, когда пользователь нажимает кнопку?

Answer 1

Вы можете вызвать свою функцию sendGetRequest() из ngOninit()

https://angular.io/api/core/OnInit

https://angular.io/guide/lifecycle-hooks

Answer 2

Вам нужно будет сделать это ..

Сначала ваш класс должен реализовать OnInit Вот так.

export class ClassName implements OnInit {

А затем вы можете использовать ngOnInit для загрузки чего-либо, когда компонент инициализирует.

ngOnInit() {
    this.http.get('http://localhost/ajax.php').subscribe((productList)=>{
        //console.log(productList);
       this.productList=productList;
    });
}

Вы также должны искать https://angular.io/guide/lifecycle-hooks для хуков жизненного цикла.