Kann die Eigenschaft nicht definiert bei der Verwendung der Interpolation nicht lesen

Question

Ich habe mich bemüht, diese Frage zu stellen und sicherzustellen, dass diese Frage nicht dupliziert wird, aber ich habe nichts gefunden, was meinem Problem ähnlich ist.

Ich bin Neuling auf Angular 2 und meine Komponentenklasse ist wie folgt:

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

    ]; 
} 

Und unten Code meiner Sicht ist:

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

Wenn ich diesen Code ausführen ich eine bekommen Fehlermeldung "Fehler in app/products/product-list.component.html: 38: 16 verursacht durch: Kann die Eigenschaft 'productName' von undefined nicht lesen, und" Kann Eigenschaft 'productName' von undefined nicht lesen "

Mit der Interpolation aus meiner Sicht erwarte ich, dass die Produkteigenschaften der Produkte innerhalb der Tags angezeigt werden.

Answer 1

Sie müssen Ihre <tr> es nicht zu schließen. Tatsächlich "schließt" du die ngFor-Schleife auf der gleichen Ebene und product ist undefiniert. Sie müssen nach Ihrer <td> Zellen schließen.

Dies funktioniert:

<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

Verwenden Sie Angular safe navigation operator, um den Pfad der verschachtelten Eigenschaften zu überprüfen. Versuchen Sie folgendes:

<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

Das einzige Problem mit Ihrem Code ist

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

Hier können Sie durch tr-Tag Looping, so td Tag wird nie einen Wert von product bekommen, weil der, dass Sie erhalten einen Fehler von

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

Wenn Sie das Element prüfen und die Ausgabe überprüfen, die Sie erhalten,

Und es gibt keine Notwendigkeit "Elvis operator" zu verwenden, da Sie bereits Daten über die Komponente und vor der Ansicht geladen bereitstellen.

Letzter Code sollte zur Klärung wie

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