angular - 错误 TS2559 : Type 'Headers' has no properties in common with type 'RequestOptionsArgs'

Question

这是我的代码，但我得到了相同的结果。我该如何解决这个问题才能正常工作？

错误 TS2559:“ header ”类型与“{ header ？: HttpHeaders | 类型没有共同的属性” { [标题:字符串]:字符串 |字符串[]; };观察？:“ body ”； params?: Ht...'.

import { Component, OnInit } from '@angular/core';
import { Http, Headers, Response, URLSearchParams } from '@angular/http';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';

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

  constructor(private http:  HttpClient) { }

  sendEmail() {

    const url = `https://your-cloud-function-url/function`;
    const params: URLSearchParams = new URLSearchParams();
    const headers = new Headers({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });

    params.set('to', 'email');
    params.set('from', 'email@website.com');
    params.set('subject', 'test-email');
    params.set('content', 'Hello World');

    return this.http.post(url, params, headers)
                    .toPromise()
                    .then( res => {
                      console.log(res);
                    })
                    .catch(err => {
                      console.log(err);
                    });

  }

Answer 1

当您使用来自 '@angular/common/http'; 的新 HttpClient(在 Angular 4 中引入)以及 HttpClientModule 进行 POST 调用，因此你应该使用HttpHeaders 而不是 '@angular/http'; 中的 Headers。您还需要将 header 作为对象传递，例如 {headers}。

修改后的代码-

sendEmail() {

    const url = `https://your-cloud-function-url/function`;
    const params: URLSearchParams = new URLSearchParams();
    const headers = new HttpHeaders({'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' });

    params.set('to', 'email');
    params.set('from', 'email@website.com');
    params.set('subject', 'test-email');
    params.set('content', 'Hello World');

    return this.http.post(url, params, {headers})
                    .toPromise()
                    .then( res => {
                      console.log(res);
                    })
                    .catch(err => {
                      console.log(err);
                    });

  }