Question

嗨，现在我可以将产品添加到数据库中，看起来它们都具有我在数据库中添加的属性。不幸的是，由于我遇到错误，我无法进行生产部署。当我尝试修复这些错误以便我可以部署它时，我无法将项添加到数据库中。

在修复＆＃39;之前阻止部署的错误：

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 = {};

到

product: Product;

我得到了

Error: Cannot read property 'title' of undefined

如果我将其更改为

product: Product = {};

我得到了

  ERROR in src/app/admin/product-form/product-form.component.ts(15,5): error TS2322: Type '{}' is not assignable to type 'Product'.
  Property '$key' is missing in type '{}'.

成分：

 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;

然后使用？模板中的运算符，以避免访问未定义的值：

<div class="row" *ngIf="product?.$key">

Answer 2

您需要在声明变量时传递默认值，或者在构造函数中为其指定默认值，因为只要渲染html，它就会查找键标题＆＃39;您当前不存在的变量产品。稍后您可以为变量产品分配实际值。这样的事情。

product: Product = {
    $key: '',
    title: '',
    price: null,
    category: '',
    imageUrl: ''
};

我希望我的回答很有帮助。：）

角度展开的问题和角度的未定义属性

2 个答案: