Question

我有一个zipCodeFormControl .valueChanges .pipe( debounceTime(500), distinctUntilChanged(), switchMap( zipcode => getAddressFromZipcode(zipcode) ), map(res => res.actualResult) ) .subscribe(addressComponents => { // Here you can extract the specific Address Components // that you want to auto fill in your form and call the patchValue method on your form or the controls individually });，每行都有一个组件intList.stream() .sorted(Comparator.comparing((Integer x) -> frequencyMap.get(x)) .thenComparing(Comparator.naturalOrder())) .forEachOrdered(System.out::println);。

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

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

mat-table

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

Answer 1

那是因为您已经在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>

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

1 个答案: