Question

我想将应用程序的数据从简单的模型测试数据更改为来自服务器的真实数据。我有一个products.service.ts，它通过以下功能获取数据：

  getProducts(product_size_type: string): Observable<Product[]> {
      // return of(PRODUCTSCAT1);
      return this.http.get<Product[]>(this.productsUrl).pipe(catchError(this.handleError('getProducts', [])));
    }

被注释掉的return of(PRODUCTSCAT1)正在从mock-products.ts返回样机数据，如下所示：

import { Product } from './product';

export const PRODUCTSCAT1: Product[] = [
        {
            id: 1,
            name: 'Product W 1',
            sex: 'W',
            category: 'cat1',
            origin: 'Korea',
            def_production: 0,
            variants: [
                { id: 1, name: '35', amount: 12, locked: 1},
                { id: 2, name: '36', amount: 30, locked: 0},
                { id: 3, name: '37', amount: 0, locked: 0},
                { id: 4, name: '38', amount: 30, locked: 0},
                { id: 5, name: '39', amount: 0, locked: 0},
                { id: 6, name: '40', amount: 12, locked: 0},
                { id: 7, name: '41', amount: 60, locked: 0},
                { id: 7, name: '42', amount: 60, locked: 0},
                { id: 7, name: '43', amount: 60, locked: 0},
            ]
        },
        {
            id: 2,
            name: 'Product W 2',
            sex: 'W',
            category: 'cat2',
            origin: 'Korea',
            def_production: 0,
            variants: [
                { id: 1, name: '35', amount: 12, locked: 0},
                { id: 2, name: '36', amount: 30, locked: 0},
                { id: 3, name: '37', amount: 0, locked: 0},
                { id: 4, name: '38', amount: 30, locked: 0},
                { id: 5, name: '39', amount: 0, locked: 0},
                { id: 6, name: '40', amount: 12, locked: 0},
                { id: 7, name: '41', amount: 60, locked: 0},
                { id: 7, name: '42', amount: 60, locked: 0},
                { id: 7, name: '43', amount: 60, locked: 0},
            ]
        },
    ];

来自服务器的数据在浏览器中看起来像这样（不间断！-我添加它们以使其可读）：

[{"id":1,"name":"Product One","sex":"W","category":"cat 1","origin":"Korea","def_production":0,"variants":
[{"id":1,"name":"35","amount":0,"locked":1},
{"id":2,"name":"36","amount":0,"locked":1},
{"id":3,"name":"37","amount":0,"locked":1},
{"id":4,"name":"38","amount":0,"locked":1},
{"id":5,"name":"39","amount":0,"locked":1},
{"id":6,"name":"34","amount":0,"locked":1},
{"id":7,"name":"41","amount":0,"locked":1},
{"id":8,"name":"42","amount":0,"locked":1},
{"id":9,"name":"43","amount":0,"locked":1}]},
{"id":2,"name":"Product Two","sex":"M","category":"cat 2","origin":"Korea","def_production":0,"variants":
[{"id":10,"name":"35","amount":0,"locked":1},
{"id":11,"name":"36","amount":0,"locked":1},
{"id":12,"name":"37","amount":0,"locked":1},
{"id":13,"name":"38","amount":0,"locked":1},
{"id":14,"name":"39","amount":0,"locked":1},
{"id":15,"name":"34","amount":0,"locked":1},
{"id":16,"name":"41","amount":0,"locked":1},
{"id":17,"name":"42","amount":0,"locked":1},
{"id":18,"name":"43","amount":0,"locked":1}]}]

此数据来自返回以下内容的PHP脚本：echo json_encode($array);

如果我使用console.log(data)将数据记录到控制台，或者当我像这样<pre>{{ data | json }}</pre>在模板中打印数据时，数据看起来非常相似。

但是，该应用程序不适用于PHP脚本中的数据，但适用于模型数据。

我想念什么吗？我的错误在哪里？或如何获取更多信息？因为我没有收到任何错误消息。

从服务器将应用程序从测试模型数据转换为真实JSON数据

0 个答案: