Angular10：类型“ Observable <Response>”上不存在属性“ map”

问题描述

我正在用角度10制作CURD应用程序。我正在尝试通过api将用户数据插入数据库。出于数据库目的，我使用了 microsoft sql server Managment studio 。但是那里出现了一些错误。因此，我在类似的stackoverflow问题中发现了这些错误，但并没有解决我的问题。

employee.service.ts （服务）

import { Injectable } from '@angular/core';
import {Employee} from '../ShareEmployee/employee';
import {Http,Response,Headers,RequestOptions,RequestMethod} from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';



@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  SelectedEmployee: Employee;
  EmployeeList: Employee[];

  constructor(private http:Http) { }

  Postemployees(emplo :Employee)
  {
    var body = JSON.stringify(emplo);
    var headeroptions=new Headers({'Content-Type':'application/json'});
    var requestoptions = new RequestOptions ({method: RequestMethod.Post,headers:headeroptions});
    return this.http.post('http://localhost:51377/api/Employees',body,requestoptions).map(x=>x.JSON())
  }

employee.component.ts

import { Component,OnInit } from '@angular/core';
import {Employee } from '../ShareEmployee/employee';
import { EmployeeService } from '../ShareEmployee/employee.service';
import { NgForm } from '@angular/forms';



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

  constructor(public employeeservice: EmployeeService) { }

  ngOnInit(): void {
    
  }

  resetBuuton(form:NgForm)
  {
    if(form != null)form.reset();
    this.employeeservice.SelectedEmployee=
    {
      EmployeeID : null,EmployeCode : '',EmployeeEmail : '',EmployeeName : '',EmployeeTP : ''
    }
  }


  onsubmit(form:NgForm)
  {
    if(form.value.EmployeeID==null)
    {
      this.employeeservice.Postemployees(form.value).suscribe(data=>{
        this.resetBuuton(form);
      })
    }
  }
}

app.module.ts

import { browserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {HttpModule} from '@angular/http';

import { AppComponent } from './app.component';
import { EmployeeDataComponent } from './employee-data/employee-data.component';
import {EmployeeComponent} from './employee-data/employee/employee.component';
import {EmployeeListsComponent} from './employee-data/employee-lists/employee-lists.component';

import { from } from 'rxjs';

@NgModule({
  declarations: [
    AppComponent,EmployeeDataComponent,EmployeeComponent,EmployeeListsComponent
  
  ],imports: [
    browserModule,FormsModule,HttpModule
  ],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

我遇到的错误

ERROR in src/app/employee-data/ShareEmployee/employee.service.ts:24:87 - error TS2339: Property 'map' does not exist on type 'Observable<Response>'.   

    24     return this.http.post('http://localhost:51377/api/Employees',requestoptions).map(x=>x.JSON())

解决方法

Angular本身已经负责serialising your request body-因此您不必自己做。不需要JSON.stringify。只需直接传递emplo对象
与响应类型相同。默认值为JSON。因此您无需执行任何操作。
如果由于其他原因需要映射响应数据：我们不能再在map原型上直接使用Observable 从RxJs 5或6开始。相反，我们使用pipe()函数，然后其中的map运算符。正确的导入应为import {map} from 'rxjs/operators'

this.http.post('http://localhost:51377/api/Employees',emplo).pipe(map(responsedata => console.log(responsedata))

angular angular angular10