无法部署，因为 属性 'category' 在类型“{}”上不存在

Question

您好，一切正常，我可以添加和删除产品，看起来它们都具有我在数据库中添加的属性。不幸的是，由于出现错误，我无法进行生产部署。

ERROR in src\app\admin\product-form\product-form.component.html(10,11): : Property 'title' does not exist on type '{}'.
src\app\admin\product-form\product-form.component.html(27,13): : Property 'price' does not exist on type '{}'.
src\app\admin\product-form\product-form.component.html(48,11): : Property 'category' does not exist on type '{}'.
src\app\admin\product-form\product-form.component.html(66,11): : Property 'imageUrl' does not exist on type '{}'.
src\app\admin\product-form\product-form.component.html(10,11): : Property 'title' does not exist on type '{}'.
src\app\admin\product-form\product-form.component.html(27,13): : Property 'price' does not exist on type '{}'.
src\app\admin\product-form\product-form.component.html(48,11): : Property 'category' does not exist on type '{}'.
src\app\admin\product-form\product-form.component.html(66,11): : Property 'imageUrl' does not exist on type '{}'.

所以这意味着在对象上找不到这些属性 'product'?

然而我在数据库中的每一个产品都具有这些属性。

为什么我会收到这个错误？

组件：

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

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
  categories$;
  product = {};
  id;

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private categoryService: CategoryService,
    private productService: ProductService
  ) {
    this.categories$ = categoryService.getAll();

    this.id = this.route.snapshot.paramMap.get('id');
    if (this.id) {
      this.productService
        .get(this.id)
        .take(1)
        .subscribe(p => (this.product = p));
    }
  }

  save(product) {
    if (this.id) {
      this.productService.update(this.id, product);
    } else {
      this.productService.create(product);
    }
    this.router.navigate(['/admin/products']);
  }

  delete() {
    if (!confirm('Are you sure you want to delete?')) {
      return;
    }
    this.productService.delete(this.id);
    this.router.navigate(['/admin/products']);
  }

  ngOnInit() {}
}

模板：

<div class="row">
    <div class="col-md-6">

        <form #f="ngForm"
            (ngSubmit)="save(f.value)">

            <div class="form-group">
                <label for="title">Title</label>
                <input #title="ngModel"
                    [(ngModel)]="product.title"
                    name="title"
                    tobject
                    ;product
                    'ype="text"
                    id="title"
                    class="form-control"
                    required>
                <div class="alert alert-danger"
                    *ngIf="title.touched && title.invalid">Title is required.</div>
            </div>

            <div class="form-group">
                <label for="price">Price</label>
                <div class="input-group">
                    <div class="input-group-addon">
                        <span class="input-group-text">$</span>
                    </div>
                    <input #price="ngModel"
                        [(ngModel)]="product.price"
                        name="price"
                        type="number"
                        class="form-control"
                        aria-label="Amount (to the nearest dollar)"
                        required
                        [min]="0">
                    <div class="input-group-append">
                        <span class="input-group-text">.00</span>
                    </div>
                </div>
                <div class="alert alert-danger"
                    *ngIf="price.touched && price.invalid">
                    <div *ngIf="price.errors.required">Price is required.</div>
                    <div *ngIf="price.errors.min">Price must be equal to or greater than zero.</div>
                </div>
            </div>

            <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel"
                    [(ngModel)]="product.category"
                    name="category"
                    id="category"
                    class="form-control"
                    required>
                    <option value=""></option>
                    <option *ngFor="let c of categories$ | async"
                        [value]="c.$key">
                        {{ c.name }}
                    </option>
                </select>
                <div class="alert alert-danger"
                    *ngIf="category.touched && category.invalid">Category is required.</div>
            </div>

            <div class="form-group">
                <label for="imageUrl">Image URL</label>
                <input #imageUrl="ngModel"
                    [(ngModel)]="product.imageUrl"
                    name="imageUrl"
                    type="text"
                    id="imageUrl"
                    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">Image URL must be formatted correctly.</div>
                </div>
            </div>
            <button class="btn btn-primary">Save</button>
            <button type="button"
                class="btn btn-danger"
                (click)="delete()">Delete</button>
        </form>
    </div>

    <div class="col-md-6">
        <product-card [product]="product"
            [show-actions]="false"></product-card>
    </div>
</div>

这里定义了产品变量：

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

我查看了其他一些像这样的帖子：

...但他们的问题略有不同

Answer 1

您需要使用类型声明字段 product 而不是定义它：product: Product;

Answer 2

用 any 类型声明即可解决。

product:any={};