javascript – 错误TypeError：无法读取未定义的属性“title”

我已经和这些代码块争夺了好几天,甚至当我尝试将它初始化为对象时我也会遇到错误.

这是我的restaurantForm.ts文件

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() {
  }

}

这是我的产品型号

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

}

我的restaurantForm.html

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

我和price,$key,restaurant和imageUrl有同样的错误.
提前致谢.虽然我查了一些解决方案,说我应该使用elvis操作符,例如’产品？.title’,这种方法仍然有效.

解决方法:

由于产品未定义,因此需要在构造函数或ngOninit中使用空对象声明和初始化它.

编辑：

您需要在组件中声明Product,

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