错误类型错误：无法读取 POST HTTP 调用中未定义的属性“订阅” - Angular [8]

Question

我正在尝试将数据发布到休息 API。 我正在使用 Postman 作为我的休息 API。 在控制台日志中的 POST HTTP 调用上无法读取未定义的属性“订阅”：

我的休息 API：“dradiobeats.x10host.com/api/areas”

用户服务.ts：

 import { Injectable, Input } from "@angular/core"; import { HttpClient, HttpHeaders } from "@angular/common/http"; import { userArray } from "./users.model"; import { Observable } from "rxjs"; const httpOptions = { headers: new HttpHeaders({ "Content-Type": "application/json", Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYyOTc3OTBmODc3ODlhYzg3MGE2ZmU3YTY0YzY2YmIwOGU4M2Q0ZmQzY2IyNmNiNWU3NDEzMTFmZjExMDk4NTA5NWUzN2IxN2I5YmI2YmFjIn0.eyJhdWQiOiIyIiwianRpIjoiZjI5Nzc5MGY4Nzc4OWFjODcwYTZmZTdhNjRjNjZiYjA4ZTgzZDRmZDNjYjI2Y2I1ZTc0MTMxMWZmMTEwOTg1MDk1ZTM3YjE3YjliYjZiYWMiLCJpYXQiOjE1NzU4NzM4MzksIm5iZiI6MTU3NTg3MzgzOSwiZXhwIjoxNjA3NDk2MjM5LCJzdWIiOiIyIiwic2NvcGVzIjpbXX0.J3nMXcPpqlRVvIRkrVAMblSUwdlXFmrkn9SPD2WE1DwdiqAMdhay8zAeD550ta9qWiNxHOKMAWF8t3H9cIgItaB9ZX2CxoxzS5P1nJFzit8qxiB-gzJL3mpybrnLtrKGjxsM5i_lBvdJsnhWzi15jKWIu-RNxUYPnXCjuxnXYEiyoJg17hsYUh4910VfFWx4R3WvH7WOvczF53IDKyX5fSTt4WSJUqciuNepkO6Klc8sj_yPmDPQltUjUXSSplkOQ8sL5uHk7PmzSjIfoR8RC0A-YQqI9mbZMTyJ0IyKoAHvRHF8q1cW5qfUmLXTgxcCTmFPqXqIlcAoOoJMCxke5fl0PuK0rgU7dxouATk_3B6cio7-7Zgps0iopDpk2nm-o40mjSiOUGb2kyKckYN09orYuan5wEd1KJ873ejKEgBWOhJu4gQFps8M9VoDXncAqMxeBqbUY1UZENx_n6uduQ_SAY4rgIUFCixfNc5Y_-HLDa108u4-z3APGbdxrhEdZXyHz9xQTaLrWcU_iCJ5g_ObT5VGZHtawZbfOYm2ZZpjPiCZpXunhrsbAcHBX64akWcehmT2gUJqPsxvaObKN3nayML1NHtdZGgAHUE89clhIH610Fod0C_jMTqpU7IkY9aSU781HsQVlHNw3qGbTinWfYPDBG0Lkp9NnmRe9BU", Accept: "application/json" }) }; @Injectable({ providedIn: "root" }) export class UsersService { users$: userArray[]; apiUrl = "http://dradiobeats.x10host.com/api/areas"; delUrl = "http://dradiobeats.x10host.com/api/areas"; constructor(private _http: HttpClient) {} getUsers() { return this._http.get<userArray[]>(this.apiUrl); } deleteUser(id: userArray): Observable<userArray> { const url = `${this.apiUrl}/${id}`; console.log(); return this._http.delete<userArray>(url, httpOptions); } onSubmit(users$: userArray): Observable<userArray> { console.log(users$); this._http.post<userArray>(this.apiUrl, users$, httpOptions); } }

添加post.component.ts：

 import { Component, OnInit } from "@angular/core"; import { UsersService } from "src/app/users.service"; import { userArray } from "src/app/users.model"; @Component({ selector: "app-add-posts", templateUrl: "./add-posts.component.html", styleUrls: ["./add-posts.component.css"] }) export class AddPostsComponent implements OnInit { name: string; description: string; domain: string; picture: string; id: number = 29; constructor(private userService: UsersService) {} users: userArray[]; ngOnInit() {} onSubmit() { const users$ = { name: this.name, description: this.description, domain: this.domain, picture: this.picture }; this.userService.onSubmit(users$).subscribe(); } }

有人可以帮忙吗？

Answer 1

您需要返回可观察的 http 调用

尝试：

onSubmit(users$: userArray): Observable<userArray> {
  console.log(users$);
  return this._http.post<userArray>(this.apiUrl, users$, httpOptions);
}

Answer 2

由于 onSubmit() 有一个 Observable 签名，它必须返回一个 observable。 您必须将函数更改为“返回 this.http.post ...”

Answer 3

你忘了返回，因为只有observable可以订阅

import { Injectable, Input } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { userArray } from "./users.model";
import { Observable } from "rxjs";

const httpOptions = {
  headers: new HttpHeaders({
    "Content-Type": "application/json",
    Authorization:
      "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6ImYyOTc3OTBmODc3ODlhYzg3MGE2ZmU3YTY0YzY2YmIwOGU4M2Q0ZmQzY2IyNmNiNWU3NDEzMTFmZjExMDk4NTA5NWUzN2IxN2I5YmI2YmFjIn0.eyJhdWQiOiIyIiwianRpIjoiZjI5Nzc5MGY4Nzc4OWFjODcwYTZmZTdhNjRjNjZiYjA4ZTgzZDRmZDNjYjI2Y2I1ZTc0MTMxMWZmMTEwOTg1MDk1ZTM3YjE3YjliYjZiYWMiLCJpYXQiOjE1NzU4NzM4MzksIm5iZiI6MTU3NTg3MzgzOSwiZXhwIjoxNjA3NDk2MjM5LCJzdWIiOiIyIiwic2NvcGVzIjpbXX0.J3nMXcPpqlRVvIRkrVAMblSUwdlXFmrkn9SPD2WE1DwdiqAMdhay8zAeD550ta9qWiNxHOKMAWF8t3H9cIgItaB9ZX2CxoxzS5P1nJFzit8qxiB-gzJL3mpybrnLtrKGjxsM5i_lBvdJsnhWzi15jKWIu-RNxUYPnXCjuxnXYEiyoJg17hsYUh4910VfFWx4R3WvH7WOvczF53IDKyX5fSTt4WSJUqciuNepkO6Klc8sj_yPmDPQltUjUXSSplkOQ8sL5uHk7PmzSjIfoR8RC0A-YQqI9mbZMTyJ0IyKoAHvRHF8q1cW5qfUmLXTgxcCTmFPqXqIlcAoOoJMCxke5fl0PuK0rgU7dxouATk_3B6cio7-7Zgps0iopDpk2nm-o40mjSiOUGb2kyKckYN09orYuan5wEd1KJ873ejKEgBWOhJu4gQFps8M9VoDXncAqMxeBqbUY1UZENx_n6uduQ_SAY4rgIUFCixfNc5Y_-HLDa108u4-z3APGbdxrhEdZXyHz9xQTaLrWcU_iCJ5g_ObT5VGZHtawZbfOYm2ZZpjPiCZpXunhrsbAcHBX64akWcehmT2gUJqPsxvaObKN3nayML1NHtdZGgAHUE89clhIH610Fod0C_jMTqpU7IkY9aSU781HsQVlHNw3qGbTinWfYPDBG0Lkp9NnmRe9BU",
    Accept: "application/json"
  })
};

@Injectable({
  providedIn: "root"
})
export class UsersService {
  users$: userArray[];
  apiUrl = "http://dradiobeats.x10host.com/api/areas";
  delUrl = "http://dradiobeats.x10host.com/api/areas";

  constructor(private _http: HttpClient) {}

  getUsers() {
    return this._http.get<userArray[]>(this.apiUrl);
  }

  deleteUser(id: userArray): Observable<userArray> {
    const url = `${this.apiUrl}/${id}`;
    console.log();
    return this._http.delete<userArray>(url, httpOptions);
  }
  onSubmit(users$: userArray): Observable<userArray> {
    console.log(users$);
   return this._http.post<userArray>(this.apiUrl, users$, httpOptions);
  }
}