Question

在提出这个问题进行搜索并确保此问题不重复之前，我已经付出了努力，但我没有找到与我的问题相似的任何内容。

我是Angular 2的新手，我的组件类如下：

/Angular2App/

以下代码是我的观点：

import {Component} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';

@Component({
 selector: 'pm-products',
 templateUrl: 'app/products/product-list.component.html'
})

export class ProductListComponent{
pageTitle: string = 'Product List';
products: any[] = [   
    {
        "productId": 1,
        "productName": "Leaf Rake",
        "productCode": "GDN-0011",
        "releaseDate": "March 19, 2016",
        "description": "Leaf rake with 48-inch wooden handle.",
        "price": 19.95,
        "starRating": 3.2,
        "imageUrl": "SOME URL"
    },
    {
        "productId": 2,
        "productName": "Garden Cart",
        "productCode": "GDN-0023",
        "releaseDate": "March 18, 2016",
        "description": "15 gallon capacity rolling garden cart",
        "price": 32.99,
        "starRating": 4.2,
        "imageUrl": "SOME URL"
    }

    ];
}

当我运行此代码时，我收到一条错误消息＆＃34; app / products / product-list.component.html：38：16错误导致：无法读取属性＆＃39; productName＆＃39;未定义＆＃34;和＆＃34;无法读取属性＆＃39; productName＆＃39;未定义＆＃34;

在我的视图中使用插值，我的期望是在标签中看到产品对象属性值。

Answer 1

您不需要在那里关闭<tr>。实际上你＆＃34;关闭＆＃34;同一级别的ngFor循环和product未定义。您必须在<td>单元格之后关闭。

这有效：

<tbody>
    <tr *ngFor='let product of products'>
        <td></td>
        <td>{{ product.productName }}</td>
        <td>{{ product.productCode }}</td>
        <td>{{ product.releaseDate }}</td>
        <td>{{ product.price }}</td>
        <td>{{ product.starRating }}</td>
     </tr>
</tbody>

Answer 2

使用RDOContactItem检查嵌套属性＆＃39;路径。试试这个：

<tbody>
    <tr *ngFor='let product of products'>
        <td></td>
        <td>{{ product?.productName }}</td>
        <td>{{ product?.productCode }}</td>
        <td>{{ product?.releaseDate }}</td>
        <td>{{ product?.price }}</td>
        <td>{{ product?.starRating }}</td>
     </tr>
</tbody>

Answer 3

您的代码唯一的问题是

<tr *ngFor='let product of products'></tr>
<td></td>
<td>{{ product.productName }}</td>
<td>{{ product.productCode }}</td>
<td>{{ product.releaseDate }}</td>
<td>{{ product.price }}</td>
<td>{{ product.starRating }}</td>
-------------------------------------------
<tr *ngFor='let product of products'></tr>

在这里，您循环显示tr代码，因此td代码永远不会获得product的任何值，因为您会收到错误

"Error in app/products/product-list.component.html:38:16 caused by: Cannot read property 'productName' of undefined", and "Cannot read property 'productName' of undefined"

如果要检查元素并检查输出，

并且不需要使用任何"Elvis operator"，因为您已经通过组件和视图加载之前提供数据。

最后的代码应该像

<tr *ngFor='let product of products'>
    <td></td>
    <td>{{ product.productId }}</td>
    <td>{{ product.productCode }}</td>
    <td>{{ product.releaseDate }}</td>
    <td>{{ product.price }}</td>
    <td>{{ product.starRating }}</td>
</tr>

使用插值时无法读取未定义的属性

3 个答案: