Question

我正在尝试从数据库中的数据写入文件，但是我从角度获取多个调用，导致多次输入相同的数据。如何停止该操作？并且还会导致一段时间后覆盖写入文件。

我没有得到应该怎么做。我在subscribing中尝试过service的事情，但没有帮助。 component.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) => { });
  }
}

service.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库。

角度服务被视为数据持有人。因此，在其中创建一个实例变量。它可能看起来像：

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();
  }
}

Answer 2

尝试一下：

// Somewhere on init
let postRequestCount = 0;

// More stuff …

// Just before doing the POST request inside the `selectCountry` method
if(postRequestCount < 1) {
    http.post(); // TODO : Replace with the actual `post` method
} 
postRequestCount++;

Answer 3

如果您可以进行堆栈式炸弹，则需要所有代码，就像Mateusz所说的那样，如果您不想两次调用后端或像https://stackblitz.com/edit/angular-biv6cw这样的简单方法，最好使用ngrx处理状态。

Answer 4

更改服务方式，例如：

添加界面：

export interface Country{
  id: number;
  name: string;
}

更改您的方法：

getCountries(): Observable<Country> {
    return this.httpClient
      .get('pass api url here')
      .pipe(
        map((body: any) => body),
        catchError(error => of(error))
      );
  }

在您的组件中：

ngOnInit() {
    this.countryService.getCountries().subscribe(
          (result: Countries) => {
            this.countries = result;
          },
          err => {
            log.debug('get countries error', err);
          }
        );
      }
}

我收到了从angular到Node中Post API的多次调用

4 个答案: