識別子 'title'は定義されていません。 '__object'にそのようなメンバーが含まれていません

Question

Angularなどの私の理解が遅い私のビジュアルスタジオコードエディタでは、アプリケーション機能に影響を与えないようなエラーがあります。

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

オブジェクト自体にはメンバーがないため、これを示す警告が表示されます。コンパイルされたjavascriptは気にしないので、これは問題を引き起こしません。これは純粋にTypescriptの「エラー」です。あなたは、すべてのメンバーとpproductするためのインタフェース/タイプ/クラスを作成ANそのタイプの、例えば変数を宣言するすべてのproduct: any = {};

と製品変数を宣言

1. ：

   は、2つのオプションがありますproduct: Product = {};

Answer 2

コンソールに製品オブジェクトをログすると、どのようなことが表示されますか？それはそれでデータが表示される場合 あなたはこれを試すことができます。

product['title']. 

は、それが動作ホープ!!