Question

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

这是我的restaurantForm.ts文件

＆＃13;

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

＆＃13;

这是我的产品型号

＆＃13;

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

＆＃13;

我的restaurantForm.html

＆＃13;

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

＆＃13;

我在price，$ key，restaurant和imageUrl上遇到了同样的错误。提前致谢。虽然我查了一些解决方案，说我应该使用elvis运营商，例如＆＃39;产品？.title＆＃39;这种方法还没有用。

Answer 1

由于产品 undefined ，您需要在 constructor 或 {{1}内使用空对象声明并初始化它}}

编辑：

您需要在组件中声明产品，

ngOninit

Answer 2

当模板初始化时，产品未定义并继续，直到响应从API返回。添加对绑定对象属性的模板的检查。对价格等也一样。

<input *ngIf="product.title" #title="ngModel" [(ngModel)]="product.title" name="title" id="title" type="text" class="form-control" required>

错误类型错误：无法读取属性＆＃39;标题＆＃39;未定义的

2 个答案: