尝试提交数据时出现错误 - Angular

Question

您好，我想将数据提交到服务器时遇到问题。 这是我的代码：

服务.ts：

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

   constructor(private http: HttpClient) { }

   createArticle(title: string, body: string, categoryId: number) {
     const postData: Article = { title: title, body: body, categoryId: categoryId};
     const url = 'http://18.192.182.140/api/articles?api_token=9aK4W3D7NpbWwPzJmUOIcyPmyehl0PHZLWP14rzQqKzUPtcFCo0Tn051CvwN';
     return this.http.post(url, postData)
  }
}

Model.ts：

export interface Article {
  title: string;
  body: string;
  categoryId: number;
}

文章组件.ts：

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

   constructor(private articleService: ArticlesService) { }

   ngOnInit(): void { }

   createNewArticle(postData: Article) {
     this.articleService.createArticle(postData.title, postData.body, 
       postData.categoryId).subscribe(responseData => {
          console.log(responseData);
     });;

}

文章.html：

<div class="container">
 <h1>Add New Article</h1>
  <div class="row">
   <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
    <form #postForm="ngForm" (ngSubmit)="createNewArticle(postForm.value)">
     <div id="user-data">
      <div class="form-group">
        <label for="title">Title</label>
        <input type="text" id="title" class="form-control">
      </div>
      <div class="form-group">
        <label for="body">Body</label>
        <input type="text" id="body" class="form-control">
      </div>
      <div class="form-group">
        <label for="category_id">Category ID</label>
        <input type="number" id="category_id" class="form-control">
      </div>
    </div>
    <button class="btn btn-primary" type="submit">Add new Article</button>
    <button class="btn btn-primary" type="button" routerLink="/admin">Cancel</button>
  </form>
</div>

当我单击“添加新文章”按钮时，我收到此错误：

ERROR HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: 'OK', url: 
'http://18.192.182.140/api/articles?api_token=9aK4W… 
WwPzJmUOIcyPmyehl0PHZLWP14rzQqKzUPtcFCo0Tn051CvwN', ok: false, …}

任何人都知道如何解决此错误，我尝试将 responseType 设置为“text”，但它不起作用。 谢谢！

Answer 1

我认为你没有发送你通过表格获得的信息看看这个： https://angular.io/api/forms/NgModelGroup

在component.ts中，他们通过onsubmit（）获取信息，我在您的代码中看不到类似的内容，尝试在“this.articleService.createArticle（postData.title，postData.body”行之前添加一个console.log确保你发送的东西