Angular 角度4：显示Laravel 5.5发送的动态页面标题时出错

我在Laravel 5.5中有以下代码：

public function index()
{
  $products = Product::all();
  return response()->json(['data' => $products, 'page_title' => 'Demo Products']);
}

在Angular 4中的product.components.ts中，我写了以下内容：

import {Title} from "@angular/platform-browser";
constructor(private productService: ProductService, private title: Title) {  }
ngOnInit() {

    this.productService.getProducts()
      .subscribe(data => {
        this.products = data.data;
        this.title.setTitle(data.page_title);
      }, (err: HttpErrorResponse) => {

但是，在编译过程中，它向我显示了以下错误：

---

src/app/product/product.component.ts中的错误（27,30）：错误TS2339: 类型“Product[]”上不存在属性“data”。 src/app/product/product.component.ts（28,34）：错误TS2339:属性 “产品[]”类型上不存在“页面标题”

编辑： 我的整个product.service.ts如下所示：

import { Injectable } from '@angular/core';
import { HttpClient , HttpHeaders }  from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import { Product } from './product';
import { HttpHandler } from '@angular/common/http/src/backend';



@Injectable()
export class ProductService {
  private url  = 'http://localhost:8000';
  private item = JSON.parse(localStorage.getItem('tokens'));
  private token = '';
  constructor(private http:HttpClient) {
    if(this.item != null){
      this.token = this.item.token;
    }
   }

   getProducts(): Observable<Product[]>{
    const url = `${this.url}/api/product`;
    return this.http.get(url,{headers: new HttpHeaders({Authorization:'Bearer '+ this.token})}).map(res => res as Product[]);
   }
}

---

根据您的评论，将您的

getProducts（）

更改为：

getProducts(): Observable<any>{
    const url = `${this.url}/api/product`;
    return this.http.get(url,{headers: new HttpHeaders({Authorization:'Bearer '+ this.token})});
}

getProducts（）：可观察{
constURL=`${this.url}/api/product`；
返回this.http.get（url，{headers:new-HttpHeaders（{Authorization:'Bearer'+this.token}）}）；
}

你会发布

控制台.log（数据）

的输出吗？我需要将控制台.log放在哪个文件/哪个函数下？我已经用控制台日志值编辑了这个问题你不需要映射HttpClientMy函数的响应现在看起来像：getProducts（）：Observable{const url=

${this.url}/api/product

；返回this.http.get（url，{headers:new-HttpHeaders（{Authorization:'Bearer'+this.token}）.map（res=>res-as-product[]）；}@NiladriBanerjee-Uttarpara，请检查src/app/product/product.service.ts（23111）中更新的应答错误：错误TS2339:类型“Object”上不存在属性“json”。我已更新了我的问题并放置了product.service的全部代码。ts@NiladriBanerjee-Uttarpara，替换我刚才发布的函数，然后重试

getProducts(): Observable<any>{
    const url = `${this.url}/api/product`;
    return this.http.get(url,{headers: new HttpHeaders({Authorization:'Bearer '+ this.token})});
}