使用服务 Angular 6 重复 Http 请求

Question

我正在尝试在 .Net Core 2.1 + Angular 应用程序中从我的数据库中删除一个对象。每次我拨打电话时都会创建两条记录。

在调试时，似乎调用已发出并发生了​​两次。控制台的网络选项卡显示两个重复的调用，并且在服务器上侦听时，每个断点都被迭代两次。这些调用是一致发生的，而不是顺序发生的，因为我必须在每个断点单击两次才能继续下一个。

我已经研究过使用共享运算符，但要么没有帮助，要么我没有正确实施？

任何帮助表示赞赏，

Module.ts

import { BusinessUnitService } from './../../services/business- 
unit.service';
import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material';
import { ToastrService } from 'ngx-toastr';
import 'rxjs/add/operator/share';

@Component({
selector: 'app-businessunit-create',
templateUrl: './businessunit-create.component.html',
styleUrls: ['./businessunit-create.component.css']
})

export class BusinessunitCreateComponent implements OnInit {

companies = [];
businessUnit: any = {};

constructor(private dialogRef: MatDialogRef<BusinessunitCreateComponent>,
private businessUnitService: BusinessUnitService,
private toastr: ToastrService) { }

ngOnInit() {
this.businessUnitService.getCompanies().subscribe(res => {
  this.companies = res;
  console.log(res);
});
}

createBusinessUnit() {
console.log(this.businessUnit);
this.businessUnitService.addBusinessUnit(this.businessUnit).share().subscribe(res => {
  this.toastr.success('New Line of Business added successfully');
  this.dialogRef.close('ok');
},
  err => {
        this.toastr.error('Line of Business could not be added: ' + err);
});
}
}

Service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { map } from 'rxjs/internal/operators/map';
import { share } from 'rxjs/operators';

@Injectable({
   providedIn: 'root'
})
export class BusinessUnitService {

addBusinessUnit(bu) {
   return this.http.post('/BusinessUnit/NewBusinessUnit', bu).pipe(share());
} 

HTML 调用位置

 <mat-dialog-actions>
<button class="mat-raised-button" (click)="close()">Close</button>
<button class="mat-raised-button mat-primary" (click)="createBusinessUnit()" 
    [disabled]="!f.valid">Save Line of Business</button>
</mat-dialog-actions>

*为清晰起见进行了编辑

Answer 1

因此，即使我的 component.ts 只调用了该函数两次，但事实证明我已将函数名称放在我的标题中。自从我做了

<form (ngSubmit)="createBusinessUnit()" #f="ngForm">

当我点击表单的“提交”按钮再次调用该函数时，该函数被调用。结果是，当我点击屏幕底部的按钮时，调用我的 http 服务的 Angular 函数被调用了两次。

<div class="form-group">
    <label for="buName">Name: </label>
    <input id="buName" type="text" class="form-control" [(ngModel)]="businessUnit.Name" name="buName" required #buName="ngModel">
    <div class="alert alert-danger" *ngIf="(buName.touched || buName.dirty) && !buName.valid">
      Please provide a Name for Line of Business.
    </div>
  </div>
  <div class="form-group">
  <label for="buNameKey">Name Key:</label> <br/>
  <small> *Warning: NameKey must be unique among Lines of Business</small>
  <input id="buNameKey" type="text" class="form-control" [(ngModel)]="businessUnit.NameKey" name="buNameKey"
  #buNameKey="ngModel" required minlength="3" maxlength="3">
<div class="alert alert-danger" *ngIf="(buNameKey.touched) && !buNameKey.valid">
  <div *ngIf="buNameKey.errors.required">
    Please provide a 3 character Name Key.
  </div>
  <div *ngIf="buNameKey.errors.minlength">
    Name Key must be at least 3 characters long.
  </div>
</div>
</div>
<div class="form-group">
 <label for="buDesc"> Description: </label>
 <input id="buDesc" name="buDesc" type="text" class="form-control" 
[(ngModel)]="businessUnit.Description">
</div>
<div class="form-group">
<label for="company">Company</label>
<select id="company" class="form-control" [(ngModel)]="businessUnit.CompanyID" 
name="company" required #company="ngModel">
  <option *ngFor="let company of companies" value="{{company.item1}}"> 
  {{company.item2}}</option>
</select>
<div class="alert alert-danger" *ngIf="company.touched && !company.valid">
   Please select a Company.
</div>
</div>
<mat-dialog-actions>
<button class="mat-raised-button" (click)="close()">Close</button>
<button class="mat-raised-button mat-primary" (click)="createBusinessUnit()" 
[disabled]="!f.valid">Save Line of Business</button>
 </mat-dialog-actions>
</form>

感谢大家的帮助！

Answer 2

遇到重复的请求，发现表单标签和按钮事件中都有重复的函数调用。移除 (click) 事件并用 Type="submit" 替换它

错误

<form (ngSubmit)="verifyLogin()" [formGroup]="loginForm">
      <button (click)="verifyLogin()" mat-raised-button color="primary">Login</button>

修复

<form (ngSubmit)="verifyLogin()" [formGroup]="loginForm">
      <button type="submit" mat-raised-button color="primary">Login</button>