标识符 'title' 未定义。 “__object”不包含这样的成员

Question

在我缓慢地理解 Angular 等过程中，我的 visual studio 代码编辑器出现错误，似乎不影响应用程序功能。

当我将鼠标悬停在 Html 模板中的一个变量上时，我收到了这个弹出窗口

我的 html 模板充满了与产品对象相关的所有错误 product.ETC...

有人能给我指出正确的方向来理解如何破译这个吗。

产品-form.component.html

<div class="row">

  <div class="col-md-6">
      <form #form="ngForm" (ngSubmit)="save(form.value)">

            <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 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">
                  <span class="input-group-addon">$</span>
                  <input #price="ngModel" 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">Price is required.</div>
                  <div *ngIf="price.errors.min">Price should be 0 or higher.</div>
                </div>
            </div>

            <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel" ngModel [(ngModel)]="product.category" name="category" id="category" class="form-control" required>
                  <option value=""></option>
                  <option *ngFor="let category of categories$ | async" [value]="category.key">{{ category.payload.val().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 [(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>

          </form>
  </div>

  <div class="col-md-6">
      <div class="card" style="width: 20rem;">
          <img class="card-img-top" [src]="product.imageUrl" *ngIf="product.imageUrl">
          <div class="card-block">
            <h4 class="card-title">{{ product.title }}</h4>
            <p class="card-text">{{ product.price | currency: 'USD': symbol }}</p>
          </div>
        </div>
  </div>

</div>

产品-form.component.ts

import { Component, OnInit } from '@angular/core';
import { CategoryService } from '../../category.service';
import { ProductService } from '../../product.service';
import { Router } from '@angular/router';
import { 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 = {};

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

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

  save(product) {
    this.productService.create(product);
    this.router.navigate(['/admin/products']);
  }

  ngOnInit() {
  }

}

product.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@Injectable()
export class ProductService {

  constructor(private db: AngularFireDatabase) { }

  create(product) {
    this.db.list('/products').push(product);
  }

  getAll() {
    return this.db.list('/products').snapshotChanges();
  }

  get(productId) {
    return this.db.object('/products/' + productId).valueChanges();
  }

}

Answer 1

您将变量 product 定义为对象

product = {};

对象本身没有任何成员，因此显示警告是为了表明这一点。这不会导致任何问题，因为编译后的 javascript 并不关心。这纯粹是一个 Typescript "error".

您有两个选择：

您使用任何 product: any = {};
您为 pproduct 创建了一个 interface/type/class，所有成员都声明了该类型的变量，例如product: Product = {};

Answer 2

当您在控制台中记录产品对象时，它显示什么？。如果它显示其中的数据，您可以试试这个：

product['title'].

希望有用！！

标识符 'title' 未定义。 “__object”不包含这样的成员

Identifier 'title' is not defined. '__object' does not contain such a member

angularfire2

angular