属性"请求选项"在类型上不存在

Question

我想从 Angular Web 客户端将数据发送到 WebAPI 服务。在这个帖子方法中，我收到一个编译错误。[ts]属性 'requestOptions' 在类型'UserService'(Current Typescrpipt(上不存在。

import { Injectable } from '@angular/core';
import { Http,Response } from '@angular/http';
import { Observable } from 'rxjs/Rx'; ///Allow clients to subscribbe responces asnc and add Rx when handling errors catch block
import {User} from './user';
import {HttpClientModule} from '@angular/common/http';
import { HttpClient } from '@angular/common/http';
import { HttpHeaders } from '@angular/common/http';
import 'rxjs/Rx';

@Injectable()
export class UserService {
  constructor( private http : Http) { 
  }

  RegisterUser(user :User) {
    const headerDict = {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'Access-Control-Allow-Headers': 'Content-Type',
      }
      const requestOptions = {                                                                                                                                                                                 
        headers: new HttpHeaders(headerDict), 
      };
      const data = JSON.stringify(User);
      return this.http.post("http://localhost:53269/Api/RegisterUser", data, this.requestOptions );
      }

}

Answer 1

将HttpClientModule与其HttpClient抽象一起使用。此外，您不需要使用JSON.stringify - 这是额外的

@Injectable()
export class UserService {
   constructor(private httpClient: HttpClient) { }
   RegisterUser(user: User) {
      const headerDict = {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'Access-Control-Allow-Headers': 'Content-Type',
      };
      const requestOptions = {                                                                                                                                                                                 
          headers: new HttpHeaders(headerDict), 
      };
      return this.httpClient.post("http://localhost:53269/Api/RegisterUser", user, requestOptions);   
  }    
}

一个音符。与实际问题无关。不要从rxjs/Rx导入任何内容。这将使您的捆绑包变得巨大。如果要导入Observable - 只需像导入一样导入

import { Observable } from 'rxjs/Observable'

如果你想要一些运算符 - 从rxjs/operators或rxjs/observables/中单独导入它

将 eihter HttpClientModule 与 HttpClient 一起使用，将 HttpModule 与 Http 一起使用 - 现已弃用

Answer 2

你可以试试这个

  const headersOption = new HttpHeaders().set('Content-Type': 'application/json',
    'Accept': 'application/json',
    'Access-Control-Allow-Headers': 'Content-Type')
  const data = JSON.stringify(User);
  return this.http.post("http://localhost:53269/Api/RegisterUser", data, {headers:headersOption});