错误 TS2339：属性 'subscribe' 在类型“{}”上不存在

Question

错误 TS2339：属性 'subscribe' 在类型“{}”上不存在。服务文件：

import { HttpClient, HttpHeaders,HttpResponse  } from '@angular/common/http';
import { Person } from './person';
import { Injectable } from '@angular/core';
import { throwError } from 'rxjs';
import 'rxjs/add/operator/map'


import { map } from "rxjs/operators";

@Injectable({
  providedIn: 'root'
})
export class ApiService {
    baseURL: string = "http://localhost:3000/api/persons/";

constructor(private http: HttpClient) {
}
 
  
 addPerson(id,name)
    {

      var obj={};
        var headers = new Headers();
        headers.append('Content-Type', 'application/json');
        let formData:FormData = new FormData();  
        formData.append('id',id);  
        formData.append('name',name);   

        this.http.post(this.baseURL + "addPerson?token",formData).pipe(map(data => {
          alert(data);
          return data;
         
        }));

        return obj;
      }
    }

组件文件：

import { Component, OnInit } from '@angular/core';
import { ApiService } from './api.service';
import { Person } from './person';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'httppost';
   people:Person[]=[];
  person = new Person();

formData:any = {};


  
  constructor(private apiService:ApiService) {
    this.formData.ID =""; this.formData.Name= "";
  }
 
  ngOnInit() {

  }
 

  addPerson() {
    this.apiService.addPerson(this.formData.ID,this.formData.Name).subscribe(data => {
        console.log(data)
       
      })      
  }
}

有服务文件，我必须在其中调用我的 api 来获取 api 以及我何时要订阅我所在的另一个 class 中的方法调用该服务方法然后显示属性“订阅”在类型 {}

上不存在的错误

Answer 1

你的服务方法应该 return 一个 Observable 来使用订阅，现在它只是 returning 一个对象，应该像

 addPerson(id,name): Observable<Person> {
    return this.httpClient.post<Person>(this.baseURL + "addPerson?token",formData);
  }

Answer 2

首先，我想提一下，使用 var 不再是一个好的做法，因此您应该考虑重构所有内容以使用 let 或 const（更多信息参见 here）。
其次，使用不带任何类型的 Typescript 或仅使用 any 作为类型也不是好的做法，因为您正在失去 Typescript 的所有好处。

让我们看看您当前的代码：

addPerson(id,name)
  {
    var obj={};
    var headers = new Headers();
    headers.append('Content-Type', 'application/json');
    let formData:FormData = new FormData();  
    formData.append('id',id);  
    formData.append('name',name);   

    this.http.post(this.baseURL + "addPerson?token",formData).pipe(map(data => {
      alert(data);
      return data;
    }));

    return obj;
  }

你的函数声明不包含任何类型，根据我假设它们是 string 类型的名称。 id 也可以是 number 类型。
你的函数的 return 值为 Object 因为你 returning 你的 obj 而不是预期的 Observable 因为你得到了错误Property 'subscribe' does not exist on type '{}'.（有关详细信息，请参阅）。

要制作您的代码，您需要按以下方式调整您的代码：

// I've added typings but they're not necessary to make it work
addPerson(id: string | number, name: string): Observable<Person> {

    const headers = new Headers();
    headers.append('Content-Type', 'application/json');
    const formData: FormData = new FormData();  
    formData.append('id', id);  
    formData.append('name', name);   
    
    // Return here your HTTP request <- This will make it work
    return this.http.post<Person>(this.baseURL + "addPerson?token",formData)
        .pipe(
            map(data => {
                return data;
            })
        );

}

通过 return HTTP 请求，您的函数的 return 值和类型是 Observable<Person>，因此组件中的订阅将按预期工作。

根据您的评论，Person 的类型可能如下所示：

export interface Person {
    id: string | number;
    name: string;
}

因为我不知道你的数据模型，所以我不能更具体地说明接口。

错误 TS2339：属性 'subscribe' 在类型“{}”上不存在

error TS2339: Property 'subscribe' does not exist on type '{}'

post

http

rxjs

angular