ERROR TypeError: Eigenschaft 'title' von undefined kann nicht gelesen werden

Question

Ich habe seit einigen Tagen mit diesen Codeblocks gekämpft, und selbst wenn ich versuche, es als Objekt zu initialisieren, erhalte ich Fehler.

dies mein restaurantForm.ts ist

import { Component, OnInit } from '@angular/core'; 
 
import {RestaurantService} from '../../restaurant.service'; 
 
import {ProductService} from '../../product.service'; 
 
import {ActivatedRoute, Router} from '@angular/router'; 
 
import 'rxjs/add/operator/take'; 
 
import {Product} from '../../model/product'; 
 

 
@Component({ 
 
    selector: 'app-product-form', 
 
    templateUrl: './restaurant-form.component.html', 
 
    styleUrls: ['./restaurant-form.component.css'] 
 
}) 
 
export class RestaurantFormComponent implements OnInit { 
 
    restaurants$; 
 
    id; 
 
    product: Product; 
 
    constructor(private restaurantService: RestaurantService, 
 
       private productService: ProductService, 
 
       private route: ActivatedRoute, 
 
       private router: Router) { 
 
    this.restaurants$ = this.restaurantService.getAll(); 
 
    this.id = this.route.snapshot.paramMap.get('id'); 
 
    if (this.id) { 
 
     this.productService.get(this.id).take(1).subscribe(p => this.product = p); 
 
    } 
 
    this.product = new Product(); 
 
    } 
 
    save(product) { 
 
    if (this.id) { 
 
     this.productService.update(this.id, product); 
 
    } else { 
 
     this.productService.create(product); 
 
    } 
 
    this.router.navigate(['/admin/restaurants']); 
 
    } 
 
    delete() { 
 
    if (!confirm('Are you sure you want to delete this product?')) { return ; } 
 
     this.productService.delete(this.id); 
 
     this.router.navigate(['/admin/restaurants']); 
 
    } 
 

 
    ngOnInit() { 
 
    } 
 

 
}

dies

export interface Product { 
 
    $key: string; 
 
    title: string; 
 
    price: number; 
 
    restaurant: string; 
 
    imageUrl: string; 
 

 
}

Mein restaurantForm.html mein Produkt Modell

Datei

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <form #f="ngForm" (ngSubmit)="save(f)"> 
 
     <div class="form-group"> 
 
      <label for="title">Title</label> 
 
      <input #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required> 
 
      <div class="alert-danger alert" *ngIf="title.touched && title.invalid"> 
 
      Title is required. 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="price">Delivery Price</label> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon">₦</span> 
 
      <input #price="ngModel" [(ngModel)]="product.price" name="price" id="price" 
 
        type="number" class="form-control" required [min]="0"> 
 
      </div> 
 
      <div class="alert alert-danger" *ngIf="price.touched && price.invalid"> 
 
      <div *ngIf="price.errors.required"> 
 
       Delivery Price is required 
 
      </div> 
 
      <div *ngIf="price.errors.min"> 
 
       Delivery Price should be 0 or higher. 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="restaurant">Restaurant</label> 
 
      <select #restaurant="ngModel" [(ngModel)]="product.restaurant" name="restaurant" id="restaurant" class="form-control" required> 
 
      <option value=""></option> 
 
      <option *ngFor="let r of restaurants$ | async" [value]="r.$key"> 
 
       {{ r.name }} 
 
      </option> 
 
      </select> 
 
      <div class="alert alert-danger" *ngIf="restaurant.touched && restaurant.invalid"> 
 
      Please select a restaurant. 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label for="imageUrl">Image Url</label> 
 
      <input #imageUrl="ngModel" [(ngModel)]="product.imageUrl" name="imageUrl" 
 
       id="imageUrl" type="text" class="form-control" required url> 
 
      <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid"> 
 
      <div *ngIf="imageUrl.errors.required">Image Url is required.</div> 
 
      <div *ngIf="imageUrl.errors.url">Please enter a valid Url.</div> 
 
      </div> 
 
     </div> 
 
     <button class="btn btn-primary">Save</button> 
 
     <button type="button" (click)="delete()" class="btn btn-danger">Delete</button> 
 
     </form> 
 
    </div> 
 
    <div class="col-md-6"> 
 
    <app-product-card [product]="product" [showActions]="false"></app-product-card> 
 
    </div> 
 
    </div> 
 
</div>

ich die gleichen Fehler mit Preis, $ key, ein Restaurant und imageUrl. danke im voraus. Obwohl ich einige Lösungen nachsuchte, die besagen, dass ich elvis Operator z. B. "Produkt? .title" verwenden sollte, funktioniert diese Methode nicht.

Answer 1

Da Produkt ist undefined, müssen Sie es mit leerem Objekt innerhalb der constructor oder ngOninit deklarieren und zu initialisieren.

EDIT:

Sie müssen das Produkt in der Komponente erklärt haben, wie,

const product : Produce = { $key: "", title: "",price:0,restuarant :"" ,imageurl:"" }; 

Answer 2

Wenn die Vorlage initialisiert erhalten, das Produkt ist nicht definiert und es wird fortgesetzt, bis die Antwort der Rückkehr von API. Fügen Sie eine Überprüfung für die Vorlage, wo Sie die Objekteigenschaften binden. Gleiches für Preis usw.