使用服务角6复制Http请求

Question

我试图在.Net Core2.1+中从我的数据库中删除一个对象。然而，每次我打电话时，都会创建两条记录。

在调试过程中，调用似乎已经发出并发生了两次。控制台的网络选项卡显示两个重复的调用，当侦听服务器时，每个断点被迭代两次。这些调用是同时发生的，而不是顺序发生的，因为在继续到下一个断点之前，我必须通过每个断点点击两次。

我已经研究过使用共享操作符，但是它要么没有帮助，要么我没有实现它，对吗？

任何帮助都很感激，

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">

当我点击表单的"submit“按钮再次调用该函数时，这个函数就被调用了。结果是，当我点击屏幕底部的按钮时，调用我的http服务的角函数被调用了两次。

<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

遇到重复的请求，发现在表单、标记和按钮事件中都有重复的函数调用。删除(单击)事件并将其替换为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>