未定义标识符“标题”。 '{}' 不包含这样的成员 angular 8

Question

This is my component file:这是我的组件文件：

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

@Component({
  selector: 'app-product-forms',
  templateUrl: './product-forms.component.html',
  styleUrls: ['./product-forms.component.css']
})
export class ProductFormsComponent implements OnInit {

categories$;
product: {};

  constructor(categoryservice: CategoriesService , private productservice: ProductService , private router: Router,
              private route: ActivatedRoute) {
    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() {
  }

}

This is my html file这是我的 html 文件

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title >Title</title>
</head>

</html>

<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" id="title" type="text" class="form-control" required>
        ***<!-- ERROR  : Identifier 'title' is not defined. '{}' does not contain such a member -->***
        <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-prepend">
          <span class="input-group-text">$</span>
        <input #price="ngModel" [(ngModel)]="product.price" name="price" id="price" type="number" class="form-control" required [min]="0">
      <!--ERROR  :  Identifier 'price' is not defined. '{}' does not contain such a member -->
      </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 0 or higher than zero</div>
        </div>
      </div>

      <div class="form-group">
        <label for="category">Cateogary</label>
        <select #category="ngModel" [(ngModel)]="product.category" name="category" id="category"  class="form-control" required>
<!--ERROR  :  Identifier 'category' is not defined. '{}' does not contain such a member -->
          <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" id="imageurl" type="text" class="form-control" required url>
        <!--ERROR  :  Identifier 'imageurl' is not defined. '{}' does not contain such a member -->
        <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
          <div *ngIf="imageUrl.errors.required">ImageUrl is required</div>
          <div *ngIf="imageUrl.errors.url">ImageUrl is required</div>

      </div>
      </div>

      <button class="btn btn-primary">Save</button>

      </form>
  </div>

  <div class="col-md-6">
    <div class="card" style="width: 18rem;">
      <img [src]="product.imageUrl" class="card-img-top" alt="..." *ngIf="product.imageUrl">
      <div class="card-body">
        <h5 class="card-title"> {{product.title}} </h5>
         <!-- ERROR  : Identifier 'title' is not defined. '{}' does not contain such a member -->
        <p class="card-text"> {{product.price | currency:'USD':true}} </p>

      </div>
    </div>
  </div>
</div>

Whenever i deploy my project i get these following errors:每当我部署我的项目时，我都会收到以下错误：
- Identifier 'imageurl' is not defined.未定义标识符“imageurl”。 '{}' does not contain such a member “{}”不包含此类成员
- Identifier 'title' is not defined.未定义标识符“标题”。 '{}' does not contain such a member “{}”不包含此类成员
- Identifier 'category' is not defined.未定义标识符“类别”。 '{}' does not contain such a member “{}”不包含此类成员
- Identifier 'price' is not defined.'{}' does not contain such a member标识符“price”未定义。“{}”不包含此类成员
- Identifier 'title' is not defined.未定义标识符“标题”。 '{}' does not contain such a member “{}”不包含此类成员

Answer 1

Try defining a class or interface with the fields needed for product ( imageurl , etc), then import this to your component and create the product variable as the new type eg product: Product;尝试使用产品所需的字段（ imageurl等）定义一个类或接口，然后将其导入您的组件并创建产品变量作为新类型，例如product: Product; instead of product: {};而不是product: {};

Eg new file product.ts例如新文件 product.ts

export class Product
{
    imageUrl: string;
    title: string;
    //etc
}

existing component.ts:现有的component.ts：

import { Router, ActivatedRoute } from '@angular/router';
import { Component, OnInit } from '@angular/core';
import { CategoriesService } from 'src/app/categories.service';
import { ProductService } from 'src/app/product.service';
import { Product } from 'src/app/product';
import 'rxjs/add/operator/take';

@Component({
  selector: 'app-product-forms',
  templateUrl: './product-forms.component.html',
  styleUrls: ['./product-forms.component.css']
})
export class ProductFormsComponent implements OnInit {

categories$;
product: Product;

  constructor(categoryservice: CategoriesService , private productservice: ProductService , private router: Router,
              private route: ActivatedRoute) {
    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() {
  }

}

Where you make the http call to retrieve the product data, also import and specify the Product type eg:在您进行 http 调用以检索产品数据的地方，还要导入并指定产品类型，例如：

get(): Observable<Product> {
  return this.http.get<Product>(exampleUrl);
}

Answer 2

You have defined product as being a type with no properties: product: {};您已将product定义为没有属性的类型： product: {}; This is what the error means - you haven't said that product has a title , price , etc. If you add the properties it should then work.这就是错误的含义 - 您没有说product具有title 、 price等。如果添加属性，它应该可以工作。

product: {
   title: string;
   price: number;
   //etc.
};

Answer 3

You need create interface object Product您需要创建接口对象 Product

export interface Product {
   title: string,
}

未定义标识符“标题”。 '{}' 不包含这样的成员 angular 8

问题描述

3 个解决方案

解决方案1
3 已采纳 2020-01-28 13:39:02

解决方案2
1 2020-01-28 13:40:45

解决方案3
1 2020-01-28 13:46:26

未定义标识符“标题”。 &#39;{}&#39; 不包含这样的成员 angular 8

问题描述

3 个解决方案

解决方案1 3 已采纳 2020-01-28 13:39:02

解决方案2 1 2020-01-28 13:40:45

解决方案3 1 2020-01-28 13:46:26

未定义标识符“标题”。 '{}' 不包含这样的成员 angular 8

解决方案1
3 已采纳 2020-01-28 13:39:02

解决方案2
1 2020-01-28 13:40:45

解决方案3
1 2020-01-28 13:46:26