Angular 角度组件在每行的mat表上调用http

我有一个

mat表

，每行都有一个组件

app order status

import { Component, Input, OnInit } from '@angular/core';
import { ApiService } from '../../../Services/api-service/api.service';


@Component({
  selector: 'app-order-statuses',
  templateUrl: './order-statuses.component.html',
  styleUrls: ['./order-statuses.component.scss']
})
export class OrderStatusesComponent implements OnInit {
  @Input() order_id: any;
  public statuses: [];
  public isVisible: boolean = true;

  constructor(private ApiService: ApiService) { }

  ngOnInit() {
     let url = 'orders/' + this.order_id + '/statuses';
    this.ApiService.get(url).subscribe((response: any) => {
      this.statuses = response.data.order_statuses;
      this.isVisible = false;
    });
  }
}

该组件从我的服务器调用订单的状态

但是，当我加载表时，每一行都会调用端点

import { Component, Input, OnInit } from '@angular/core';
import { ApiService } from '../../../Services/api-service/api.service';


@Component({
  selector: 'app-order-statuses',
  templateUrl: './order-statuses.component.html',
  styleUrls: ['./order-statuses.component.scss']
})
export class OrderStatusesComponent implements OnInit {
  @Input() order_id: any;
  public statuses: [];
  public isVisible: boolean = true;

  constructor(private ApiService: ApiService) { }

  ngOnInit() {
     let url = 'orders/' + this.order_id + '/statuses';
    this.ApiService.get(url).subscribe((response: any) => {
      this.statuses = response.data.order_statuses;
      this.isVisible = false;
    });
  }
}

---

如何使其仅在事件上调用端点（例如，单击按钮）。

这是因为您在

ngOnInit

中进行了API调用。每当组件的

@Input

属性发生更改时，就会调用此生命周期挂钩

只需将代码移动到另一个方法，然后单击按钮调用此方法：

import { Component, Input, OnInit } from '@angular/core';
import { ApiService } from '../../../Services/api-service/api.service';

@Component({
  selector: 'app-order-statuses',
  templateUrl: './order-statuses.component.html',
  styleUrls: ['./order-statuses.component.scss']
})
export class OrderStatusesComponent implements OnInit {
  @Input() order_id: any;
  public statuses: [];
  public isVisible: boolean = true;

  constructor(private ApiService: ApiService) {}

  ngOnInit() {}

  getStatus() {
    let url = 'orders/' + this.order_id + '/statuses';
    this.ApiService.get(url).subscribe((response: any) => {
      this.statuses = response.data.order_statuses;
      this.isVisible = false;
    });
  }

}

在模板中：

<button (click)="getStatus()">Get Status</button>

获取状态

这是因为您在

ngOnInit

中进行了API调用。每当组件的

@Input

属性发生更改时，就会调用此生命周期挂钩

只需将代码移动到另一个方法，然后单击按钮调用此方法：

import { Component, Input, OnInit } from '@angular/core';
import { ApiService } from '../../../Services/api-service/api.service';

@Component({
  selector: 'app-order-statuses',
  templateUrl: './order-statuses.component.html',
  styleUrls: ['./order-statuses.component.scss']
})
export class OrderStatusesComponent implements OnInit {
  @Input() order_id: any;
  public statuses: [];
  public isVisible: boolean = true;

  constructor(private ApiService: ApiService) {}

  ngOnInit() {}

  getStatus() {
    let url = 'orders/' + this.order_id + '/statuses';
    this.ApiService.get(url).subscribe((response: any) => {
      this.statuses = response.data.order_statuses;
      this.isVisible = false;
    });
  }

}

在模板中：

<button (click)="getStatus()">Get Status</button>

获取状态