获取 angular 8 发布 http 请求的问题，Postman 工作正常

Question

I'm having some problems getting angular to post my data to the API backend. The API works fine with Postman.

I have a service for the Observable and then I subscribe to it in the component.

What am I trying to do? I'm trying to post to my backend api/database the firstname, lastname and emaladdress from the html form. If I use Postman it works perfectly, so I don't see that the problem is with the API part. The html has a form in which calls the OnFormSubmit() function. This in turn calls the createArticle(article) function in the article.component.ts, which uses the articleService.createArticle(article) function in the article.service.ts file. When I run the CreateArticle(article) the data/values are passed and returned but in the backend api, they are never written. If I use Postman and add the values for firstname, lastname, and emailaddress it works prefectly.

EmailsubControler.cs This is from the backend api, which works fine with postman

//Post an entry to email addresses

  [AllowAnonymous]
    [HttpPost]
    public async Task<IActionResult> Post(string firstname, string lastname, string emailaddress)
    {

    var newemailsub = new EmailSubscriptionModel{ Firstname = firstname, Lastname = lastname, Emailaddress = emailaddress};
    await _context.EmailSub.AddAsync(newemailsub);
    await _context.SaveChangesAsync();

    return Ok(newemailsub);

    }

article.component.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Observable, Observer } from 'rxjs';
import { HttpErrorResponse } from '@angular/common/http';
import { ArticleService } from './article.service';
import { Article } from './article';
import { map } from 'rxjs/operators';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';



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


  constructor(private formBuilder: FormBuilder, private articleService: ArticleService, private http: HttpClient) { }


  get firstname() {
     return this.articleForm.get('firstname');
  }

  get lastname() {
     return this.articleForm.get('lastname');
  }

  get emailaddress() {
     return this.articleForm.get('emailaddress');
  }   
  dataSaved = false;
  articleForm: FormGroup;
  allArticles$: Observable<Article[]>;


  time = new Observable<string>((observer: Observer<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });



  ngOnInit() {
    this.articleForm = this.formBuilder.group({

      firstname: ['', [ Validators.required ] ],
      lastname: ['', [ Validators.required ] ],
      emailaddress: ['', [ Validators.required ] ]
    });
    // this.loadAllArticles();


  }
  onFormSubmit() {
    console.log('articleafterdataSaved', this.articleForm.value);
    this.dataSaved = false;
    let article = this.articleForm.value;

    this.articleService.getAllArticles().subscribe(articles => {

      this.createArticle(article);

    });
    this.articleForm.reset();
  }

  createArticle(article) {
    console.log('articledataincreatearticle', article);
    this.articleService.createArticle(article)
    .subscribe(

      Response => console.log('insubscribe-returned:', article),
      this.dataSaved = true,
        this.loadAllArticles()
    );

  }



loadAllArticles() {
     this.allArticles$ = this.articleService.getAllArticles();
  }


} 

article.ts This is the interface

export interface Article {
    id?: number;
    firstname: string;
    lastname: string;
    emailaddress: string;
}

article.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { Article } from './article';
import { map } from 'rxjs/operators';
import { catchError, retry } from 'rxjs/operators';


@Injectable({
  providedIn: 'root'
})
export class ArticleService {
  url = "https://localhost:5001/emailsub";

  constructor(private http: HttpClient) { }


/*   createArticle(article: Article): Observable<Article> {
    console.log('1inservicearticle', article);
    let httpHeaders = new HttpHeaders()
        .set('Content-Type', 'application/json');   
    let options = {
        headers: httpHeaders
    };        
    console.log('inservicearticle', article);
    console.log('inservicearticle', this.url);
   // return this.http.post<Article>(this.url, article, options);
    return this.http.post<Article>(this.url, article, options);
  } */

errorHand1: any;



    httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    };
  createArticle(article): Observable<Article> {


    console.log('1inservicearticle', article);

    console.log('inservicearticle-article', article);
    console.log('inservicearticle-url', this.url);
    console.log('inservicearticle-JSON', JSON.stringify(article));
   // return this.http.post<Article>(this.url, article, options);
    return this.http.post<Article>(this.url, JSON.stringify(article), this.httpOptions)
    .pipe(
      retry(1),
      catchError(this.errorHand1)
    );




     }













  postArticle(article: Article): Observable<HttpResponse<Article>> {
    let httpHeaders = new HttpHeaders({
         'Content-Type' : 'application/json'
    });    
    console.log('inservice', article.firstname);
    return this.http.post<Article>(this.url, article,
        {
          headers: httpHeaders,
          observe: 'response'

        }

    );
}    


getAllArticles(): Observable<Article[]> {
    return this.http.get<Article[]>(this.url);
}     
} 

article.component.html

<h3>Create Article</h3>
<p *ngIf="dataSaved && articleForm.pristine" ngClass = "success">
    Article created successfully.
</p>
<form [formGroup]="articleForm" (ngSubmit)="onFormSubmit()">
  <table>
     <tr> 
       <td>firstname: </td>
       <td> 
        <input formControlName="firstname">
        <div *ngIf="firstname.dirty && firstname.errors" class = "error"> 
               <div *ngIf="firstname.errors.required"> 
            firstname required.
           </div>   
            </div>
       </td>
     </tr> 
     <tr> 
       <td>lastname: </td>
       <td> 
          <input formControlName="lastname">
          <div *ngIf="lastname.dirty && lastname.errors" class = "error"> 
          <div *ngIf="lastname.errors.required"> 
            lastname required.
          </div>    
          </div>       
       </td>
     </tr>   
     <tr>
       <td>emailaddress: </td>
       <td> 
          <input formControlName="emailaddress">
          <div *ngIf="emailaddress.dirty && emailaddress.errors" class = "error"> 
            <div *ngIf="emailaddress.errors.required"> 
            emailaddress required.
        </div>             
          </div>       
       </td>
     </tr>       
     <tr>     
       <td colspan="2">
          <button [disabled]="articleForm.invalid">Submit</button>
       </td>
     </tr>     
  </table>  
</form>
<h3>Article Details</h3>
<p *ngFor="let article of allArticles$ | async">
    {{article.id}} | {{article.firstname}} | 
  {{article.lastname}} | {{article.emailaddress}}
</p> 
<div><code>observable|async</code>: Time: {{ time | async }}</div>

Answer 1

First of all,

you're subscribing to getAllArticles() in your onFormSubmit() , why would you fetch all articles, assign the response to the local articles and not use it? This code is a mess, 1st remove that subscription to getAllArticles() , because it's out of context of creating a new article.

  onFormSubmit() {
    console.log('articleafterdataSaved', this.articleForm.value);
    this.dataSaved = false;
    let article = this.articleForm.value;  // not sure if that's the correct way to get the values either, but that's for another time.
    this.createArticle(article);
    this.articleForm.reset();
  }

Then, I assume, you'd like to load all articles after that's done, for whatever reason. In your createArticle() function you're subscribing to the response of articleService.createArticle() and updating dataSaved and loading all articles.

  createArticle(article) {
    console.log('articledataincreatearticle', article);
    this.articleService.createArticle(article)
    .subscribe(

      Response => console.log('insubscribe-returned:', article),
      this.dataSaved = true,
        this.loadAllArticles()
    );

  }

however in this.loadAllArticles() you're assigning allArticles$ to be articleService.getAllArticles()

loadAllArticles() {
   this.allArticles$ = this.articleService.getAllArticles();
}

this of course does nothing unless subscribed.

1st pass:

  createArticle(article) {
    console.log('articledataincreatearticle', article);
    this.articleService.createArticle(article).pipe(
      switchMap(response => {
        console.log('insubscribe-returned:', response);
        this.dataSaved = true;
        return this.articleService.getAllArticles();
      }
    .subscribe(articles => this.articles = articles);
  }

Here we introduced switchMap and pipe() To understand this, you have to look at the map() operator. Observables are a stream of data. rxjs deals with streams of data.

You can pipe, just like you would in a linux or macos shell, operators and finally subscribe to the result.

Here we switched away from the stream of the articleService.createArticle() Observable, did something inside the function (note the {}) and returned a new Observable stream, articleService.getAllArticles() . Then we do whatever with the response of this stream.

2nd pass:

onFormSubmit() {
  this.dataSaved = false;
  const article = this.articleForm.value;
  this.articleService.createArticle(article).pipe(
    tap(data => console.log('response from createArticle:', data)),
    tap(data => this.dataSaved = true),
    switchMap(response => this.articleService.getAllArticles()),
    tap(allArticlesData => console.log('all articles response:', allArticlesData)
  ).subscribe(articles => this.articles = articles)
}

So we did a bunch of stuff. We tap ped into the stream to log the data. We also used the tap operator to change the dataSaved state. We then switched away from the stream to return a new stream. Tapped into that stream to console.log values. And finally assigned the response of that stream to the local articles member variable.

And this is only the tip of the iceberg of issues with your code.