Question

我在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 []”类型中不存在属性“数据”。 src / app / product / product.component.ts（28,34）：错误TS2339：属性 “Product []”类型中不存在“page_title”。

编辑：

我的整个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[]);
   }
}

这是console.log（数据）的结果：

{data: Array(20), page_title: "Demo Products"}
data
:
Array(20)
0
:
{id: 1, product_name: "Ibrahim Gleichner", description: "She had quite a crowd of little animals and birds …'Where shall I begin, please your Majesty,' said.", rating: 6, price: 9.6, …}
1
:
{id: 2, product_name: "Miles Rempel", description: "This was not going to do that,' said the Hatter. H… 'A barrowful of WHAT?' thought Alice to herself.", rating: 2, price: 8.7, …}
2
:
{id: 3, product_name: "Dr. Maida Mills Jr.", description: "Alice, rather alarmed at the bottom of a tree a fe… isn't a bird,' Alice remarked. 'Oh, you foolish.", rating: 3, price: 7.6, …}
3
:
{id: 4, product_name: "Brandi Yost", description: "Alice said very politely, 'if I had not gone far b…nd a fan! Quick, now!' And Alice was very likely.", rating: 0, price: 60.3, …}
4
:
{id: 5, product_name: "Syble Schinner PhD", description: "English!' said the Duchess: you'd better leave off…son they're called lessons,' the Gryphon went on.", rating: 7, price: 97.6, …}
5
:
{id: 6, product_name: "Patrick Stoltenberg", description: "Dinah, tell me the truth: did you call him Tortois… Rabbit. She was looking up into the air off all.", rating: 8, price: 13.5, …}
6
:
{id: 7, product_name: "Micheal Davis", description: "Has lasted the rest of my own. I'm a deal faster t…ll say this), 'to go on crying in this way! Stop.", rating: 3, price: 27.6, …}
7
:
{id: 8, product_name: "Prof. Kurtis Renner", description: "King triumphantly, pointing to Alice a little scre…iting down 'stupid things!' on their throne when.", rating: 9, price: 5.9, …}
8
:
{id: 9, product_name: "Minnie Ebert", description: "Mouse had changed his mind, and was going to leave…jure the brain; But, now that I'm perfectly sure.", rating: 0, price: 40.9, …}
9
:
{id: 10, product_name: "Noble Jerde", description: "He looked at the top of its right ear and left off…dly up and beg for its dinner, and all the party.", rating: 1, price: 25, …}
10
:
{id: 11, product_name: "Flo Connelly", description: "INSIDE, you might do something better with the lob… a natural way again. 'I wonder if I've kept her.", rating: 9, price: 40.8, …}
11
:
{id: 12, product_name: "Ryan Dickinson", description: "I was sent for.' 'You ought to be sure, she had fe… he had taken his watch out of THIS!' (Sounds of.", rating: 8, price: 70.5, …}
12
:
{id: 13, product_name: "Brandt Brekke", description: "THAT. Then again--"BEFORE SHE HAD THIS FIT--" you …a how to begin.' For, you see, Miss, we're doing.", rating: 8, price: 94.5, …}
13
:
{id: 14, product_name: "Faye Erdman", description: "Alice in a day is very confusing.' 'It isn't,' sai…ury wrote it down into a tidy little room with a.", rating: 3, price: 18.2, …}
14
:
{id: 15, product_name: "Nicola Quitzon PhD", description: "THE VOICE OF THE SLUGGARD,"' said the last words o…ny teeth, so she set to work throwing everything.", rating: 9, price: 69.8, …}
15
:
{id: 16, product_name: "Prof. Carson Raynor", description: "King very decidedly, and he poured a little girl s…ing people up like a Jack-in-the-box, and up the.", rating: 2, price: 70.8, …}
16
:
{id: 17, product_name: "Prof. Vita Klein", description: "OUTSIDE.' He unfolded the paper as he wore his cro… of its mouth, and addressed her in an undertone.", rating: 4, price: 95.1, …}
17
:
{id: 18, product_name: "Katarina Prosacco", description: "Gryphon, and all the rest were quite silent, and l…peared, she was near enough to drive one crazy!'.", rating: 8, price: 79.8, …}
18
:
{id: 19, product_name: "Adam Walsh", description: "Rabbit coming to look for her, and the small ones …ice, and see after some executions I have to ask.", rating: 0, price: 59.2, …}
19
:
{id: 20, product_name: "Marilyne Kulas II", description: "I want to stay in here any longer!' She waited for…eply. 'What is it?' he said, turning to Alice an.", rating: 5, price: 13.5, …}
length
:
20
__proto__
:
Array(0)
page_title
:
"Demo Products"
__proto__
:
Object

Answer 1

根据您的评论，将您的getProducts()更改为：

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

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

编辑：

1 个答案: