使用插值時無法讀取未定義的屬性

我已經付出了努力，然後要求此問題進行搜索並確保此問題不重複，但我沒有找到與我的問題類似的任何內容。使用插值時無法讀取未定義的屬性

我是新手到角2，我的組件類是象下面這樣：

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" 
    } 

    ]; 
}

而下面的代碼是我的看法：

<div class='table-responsive'> 
    <table class='table' 
     *ngIf='products && products.length'> 
     <thead> 
      <tr> 
       <th> 
        <button class='btn btn-primary'> 
         Show Image 
        </button> 
       </th> 

       <th>Product</th> 
       <th>Code</th> 
       <th>Available</th> 
       <th>Price</th> 
       <th>5 Star Rating</th> 
      </tr> 
     </thead> 
     <tbody> 
      <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> 

     </tbody> 
    </table> 

</div>

當我運行這段代碼，我得到一個錯誤，說：「錯誤在app/products/product-list.component.html：38：16引起的：無法讀取未定義的屬性'productName'和'無法讀取未定義的屬性'productName'」

在我的視圖中使用插值，我的期望是看到標籤內的產品對象屬性值。

來源

2017-03-29 Benjamin

你不需要關閉你的<tr>那裏。其實你關閉了同一級別的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>

來源

2017-03-29 07:05:56

一個糟糕的錯誤導致了這麼多的混亂！謝謝@Hristo！ – Benjamin

它發生了:)不客氣。 –

使用Angular safe navigation operator來檢查嵌套屬性的路徑。試試這個：

<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>

來源

2017-03-29 07:04:39

THX澄清，我會更新的答案。 –

與您的代碼的唯一問題是

<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"，因爲您已經通過組件提供數據並且在視圖加載之前就不需要使用任何"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>

來源

2017-03-29 07:28:49

使用插值時無法讀取未定義的屬性

回答

相關問題