订阅两次 Angular 11 http？

Question

我是angular的初学者，遇到了一个非常难的问题。也就是我订阅的时候，会产生两个请求。我确定后端没有问题，因为我设置了断点并向邮递员请求。断点表示发送了一次，但是用angular客服端的请求发送了两次。如果有人能告诉我答案，我将不胜感激

dialog.component.html

<form class="form" [formGroup]="addForm" (ngSubmit)="add()">
  <h5 mat-dialog-title>Add</h5>
  <mat-dialog-content>
    <mat-form-field class="full-width">
      <mat-label>name:</mat-label>
      <input matInput type="text" placeholder="" [(ngModel)]="value" formControlName="name">
      <button mat-button *ngIf="value" matSuffix mat-icon-button (click)="value=''">
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>

    <mat-form-field class="full-width">
      <mat-label>description</mat-label>
      <textarea matInput placeholder="" formControlName="description"></textarea>
    </mat-form-field>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button mat-button type="submit">submit</button>
    <button mat-button mat-dialog-close>cancel</button>
  </mat-dialog-actions>
</form>

dialog.component.ts

import { Component, OnInit } from '@angular/core';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ListService } from '../list.service';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {

  value = '';
  addForm: FormGroup;

  constructor(private lisitService: ListService, private fb: FormBuilder) {
    this.addForm = this.fb.group({
      'name': ['', Validators.required],
      'description': ['']
    })
  }

  ngOnInit(): void {
  }

  add() {
    this.lisitService.add(this.addForm.value).subscribe(result => {
      console.log("函数执行了");
      console.log(result);
    });
  }
}

list.service.ts

import { Inject, Injectable } from '@angular/core';

import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  private getPath: string;
  private addPath: string;

  constructor(private http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    this.getPath = baseUrl + 'documents/html/tags/get';
    this.addPath = baseUrl + 'documents/html/tags/add';
  }

  add(data: any): Observable<any> {
    return this.http.post(this.addPath, data);
  }
}

frist:200

second:500 Violation of PRIMARY KEY constraint, I know.

Answer 1

一次提交两个请求的问题已经解决原因是后端的returns不是json对象而是字符串，而前端接收的是默认的json对象，所以我觉得原因就在这里，问题出在修改后解决

我在后端做了以下改动

函数

        public async Task<AddTagResponseModel> Add(string name, string description)
        {
            var tag = new Tag
            {
                Name = name,
                Description = description
            };

            this.data.Add(tag);

            await this.data.SaveChangesAsync();

            return new AddTagResponseModel
            {
                Result = "添加成功"
            };
        }

AddTagResponseModel

namespace www.wuxiancong.com.Features.Documents.Html.Tags.Models
{
    public class AddTagResponseModel
    {
        public string Result { get; set; }
    }
}

前端修改如下。 [默认接收到的请求数据为Json]

import { Component, OnInit } from '@angular/core';

import { DocumentsHtmlTagsListService } from '../list.service';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {

  value = '';
  addForm: FormGroup;

  constructor(private lisitService: DocumentsHtmlTagsListService, private fb: FormBuilder) {
    this.addForm = this.fb.group({
      'name': ['', Validators.required],
      'description': ['']
    })
  }

  ngOnInit(): void {
  }

  add() {
    var obs = this.lisitService.add(this.addForm.value).subscribe(data => {
      console.log(data['result']);
    });
  }
}

犯了一个低级错误，困扰了我三天

订阅两次 Angular 11 http？

Subscribe twice to Angular 11 http?

httpclient

subscribe

observable

angular