Seltsames Verhalten von Typoskript String.split() Funktion

Question

habe ich Typoskript Modell wie folgt aus:

export class Product { 
    id:number; 
    name:string; 
    brand:Brand; 
    price:number; 
    shippingPrice:number; 
    description:string; 
    photoName:string; 
    productType:ProductType; 
    purchaseCounter:number; 
    rating:number; 
    volume:string; 
    ingredients:string; 
} 

und JSON-Datei, die dieses Modell zu füllen:

{ 
    "id": 1, 
    "name": "xxx", 
    "description": "xxx", 
    "price": 12.34, 
    "purchaseCounter": 12, 
    "photoName": "xx", 
    "shippingPrice": 12.99, 
    "volume": "xxx", 
    "rating": 4.7, 
    "ingredients": "A,B,C", 
    "brand": { 
    "id": 1, 
    "name": "xx" 
    }, 
    "productType": { 
    "id": 3, 
    "name": "xxx" 
    } 
} 

Jetzt in meinem Typoskript Komponente I Funktion wie folgt aus:

public getIngredients():String [] { 
     return this.product.ingredients.split(","); 
    } 

Jedesmal, wenn ich diese Funktion am Aufruf ich habe Fehler:

"TypeError: Cannot read property 'split' of undefined"

aber wenn ich Körper Funktion zu ändern, wie dies etw:

public getIngredients():String [] { 
    if (this.product.ingredients == null) { 
     return null; 
    } 
    return this.product.ingredients.split(","); 
} 

dann eveyrthing ok ist und Split-Funktion richtig funktioniert. Haben Sie eine Idee, warum, wenn Zutaten nicht Null sind, reparieren Sie es? Ich muss Admin, dass ich gerade mein Abenteuer mit js und ts beginnen. Dank

UPDATE ich dieses Produkt Variable Instanziierung hier:

export class ProductOverviewComponent implements OnInit { 
    private product:Product; 
    private errorMessage:string; 

    constructor(private productService:ProductService) { 
     this.product = new Product(); 
    } 

    ngOnInit():void { 
     this.productService.getProduct() 
      .subscribe(
       product => this.product = product, 
       error => this.errorMessage = <any>error); 
    } 
} 

Vorerst kam ich auf die JSON-Datei aber in Zukunft werde ich mit dem Server betroffen. Ein anderer Gedanke ist, dass ich Produkt mit @Input() an ein anderes Produkt übergebe.

Und das ist, wie ich nennen getIngredients

funktionieren

<div class="col-md-12"> 
     <div class="property-text"> 
      <!--<h3 class="h3style">Ingredients</h3>--> 
      <ul> 
       <li *ngFor="let ingredient of getIngredients()"> 
        {{ ingredient }} 
       </li> 
      </ul> 

     </div> 
    </div> 

Answer 1

The TypeError, die Sie erhalten, ist ein JavaScript-Fehler zur Laufzeit erhöht und hat nichts mit Typoskript zu tun. Es passiert, weil this.product.ingredients nicht definiert ist. Ihr "Fix" funktioniert, weil undefined == nulltrue in JavaScript ist, was zu einer frühen Rückgabe innerhalb getIngredients() führt. Wenn Sie den Operator === zum Vergleichen mit null verwenden, würde Ihr Fix nicht mehr funktionieren. Die Frage ist dann warum this.product.ingredients nicht definiert ist? Das liegt möglicherweise daran, dass der TypeScript-this-Kontext in getIngredients() verloren gegangen ist. Von dem Code, den Sie zur Verfügung gestellt haben, ist es unmöglich zu bestimmen, ob das der Fall ist, aber es gibt eine nette Beschreibung über das Problem im 'this' in TypeScript Artikel auf Github, die Ihnen helfen könnte, Ihr Problem zu lösen. Eine einfache erste Überprüfung könnte sein, console.log(this) innerhalb getIngredients() hinzuzufügen, um zu sehen, was this wirklich ist.