node.js - 我收到从 Angular 到 Node 中的 Post API 的多个调用

Question

我正在尝试根据数据库中的数据写入文件，但我收到来自 Angular 多个调用，导致相同数据的多个条目。我该如何阻止？而且它还会导致在一段时间后覆盖写入文件。

我不知道我到底应该做什么。我已经尝试过subscribing service中的东西有 Angular 但没有帮助。组件.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { NgbModalRef, NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { ToastrService } from 'ngx-toastr';
import { CountryService } from './country.service';
import { ConfigService } from '../config.service';

@Component({
  selector: 'app-country',
  templateUrl: './country.component.html',
  styleUrls: ['./country.component.scss'],
  encapsulation: ViewEncapsulation.None,
  providers: []
})
export class CountryComponent implements OnInit {
  public modalRef: NgbModalRef;
  public form: FormGroup;
  public selectedCountry;
  public countries;
  constructor(public fb: FormBuilder, public toastrService: ToastrService,
    public modalService: NgbModal, public configService: ConfigService,
    public countryService: CountryService) {

  }

  ngOnInit() {
    this.form = this.fb.group({
      country: [null, Validators.compose([Validators.required])],
    });
    this.getCountries();
  }

  public getCountries() {
    this.countryService.getCountries((data) => {
      this.countries = data.countries;
    }, (err) => { });
  }

  public selectCountry(country) {
    this.countryService.selectCountry(country, (resp) => {
    }, (err) => { });
  }
}

服务.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { ConfigService } from '../config.service';
import { ToastrService } from 'ngx-toastr';

@Injectable({
  providedIn: 'root'
})
export class CountryService {
  private setHeaders() {
    const headers = new HttpHeaders({
      'content-type': 'application/json',
    });
    return headers;
  }
  constructor(private configService: ConfigService, public http: HttpClient, public toastrService: ToastrService) { }

  selectCountry(country: any, callback, errCallback) {
       const options = {
      headers: this.setHeaders(),
    };
    this.http.post(this.configService.url + '/selectedCountry', country, options).subscribe((resp: any) => {
      callback(resp);
    }, err => {
      errCallback(err);
    });
  }

  getCountries(callback, errCallback) {
       const options = {
      headers: this.setHeaders(),
    };
    this.http.get(this.configService.url + '/countries', options).subscribe((resp: any) => {
         callback(resp.msg);
    }, err => {
      errCallback(err);
    });
  }

}

我希望调用只发送一次，而不是两次

Answer 1

顺便说一句。 - 请考虑在您的应用中添加 NGRX 库。

Angular 服务被视为数据持有者。所以在那里创建一个实例变量。它可能看起来像:

export class Service{
  private countries;
  ...
  public getCountries(){
     return this.countries;
  }

  public loadCountries(){
     this.http.get("url").subscribe(countries => this.countries = countries);
  }
}

然后在您的组件类中，您只需获取国家/地区。

export class Component{
  public coutries;
  ...
  public ngOnInit(){
    this.countryService.getCountries(countries => this.countries=coutries);
  }
 }

最后但并非最不重要的一点 - 在您的 AppComponent 中加载国家/地区。

export class AppComponent{
  ...
  public ngOnInit(){
     this.countryService.loadCountries();
  }
}