0

当我使用 [(ngModel)] 时，会发生此问题，并且我从 firebaseDatabase 使用的类别没有出现，为什么？

这就是问题

src/app/admin/product-form/product-form.component.html:6:73 中的错误 - 错误 TS2339：类型“{}”上不存在属性“标题”。

6                     <input required minlength="3" [(ngModel)]='products.title' #title="ngModel" ngModel name="title" type="text" id="title"
                                                                          ~~~~~

  src/app/admin/product-form/product-form.component.ts:7:16
    7   templateUrl: './product-form.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ProductFormComponent.
src/app/admin/product-form/product-form.component.html:6:73 - error TS2339: Property 'title' does not exist on type '{}'.      

6                     <input required minlength="3" [(ngModel)]='products.title' #title="ngModel" ngModel name="title" type="text" id="title"

与价格相同 - 类别和 imageUrl

产品形式component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CategoryService } from "src/app/services/category.service";
import { ProductService } from "src/app/services/product.service";
@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
  id = '';
  products: {};
  categories$;
  constructor(
    private route: Router,
    private catgServices: CategoryService,
    private productServices: ProductService,
    private router: ActivatedRoute
  ) {
    this.id = this.router.snapshot.paramMap.get('key');
    if (this.id) {
      this.productServices.getProductByKey(this.id).subscribe(val => { this.products = val; })
    }
  }

  ngOnInit(): void {
    this.categories$ = this.catgServices.getCategories();

  }

  // onSubmit(product) {
  //   this.productServices.create(product);
  //   this.route.navigate(['/admin/products']);
  // }

  onSubmit(product) {
    if (this.id) {
      this.productServices.productUpdate(this.id, product)
    }
    else {
      this.productServices.create(product);
    }
    this.route.navigate(['/admin/products']);

  }

}

产品-form-component.html

<div class="row">
    <div class="col-md-6">
        <form ngForm #f="ngForm" (ngSubmit)="onSubmit(f.value)">
            <div class="form-group">
                <label for="Title">Title</label>
                <input required minlength="3" [(ngModel)]='products.title' #title="ngModel" ngModel name="title"
                    type="text" id="title" class="form-control">
                <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
                    <div *ngIf="title.errors?.required">Please Enter title of the product</div>
                    <div *ngIf="title.errors?.minlenght">
                        Min Lenght Of the product:
                        {{title.errors?.minlenght.requiredLenght}}
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="price">Price</label>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">$</span>
                    </div>
                    <input [(ngModel)]='products.price' [min]="1" required #price="ngModel" ngModel name="price"
                        type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
                    <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">Please Enter price of the product</div>
                    <div *ngIf="price.errors?.min">Minmum price is 1$</div>
                </div>
            </div>
            <div class="form-group">
                <label for="category">Category</label>
                <select [(ngModel)]='products.category' required #category="ngModel" ngModel name="category" type="text"
                    id="category" class="form-control">
                    <option value="">Please chose category</option>
                    <option *ngFor="let catg of categories$ | async" [value]="catg.name">
                        {{catg.name}}
                    </option>
                </select>
                <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
                    <div *ngIf="category.errors?.required">Please Choose the Category</div>
                </div>
            </div>
            <div class="form-group">
                <label for="imageUrl">imageUrl</label>
                <input [(ngModel)]='products.imageUrl' url required #imageUrl="ngModel" ngModel name="imageUrl"
                    type="text" id="imageUrl" class="form-control">
                <div class="alert alert-danger" *ngIf="imageUrl.touched && imageUrl.invalid">
                    <div *ngIf="imageUrl.errors?.required">Please Enter image Url</div>
                    <div *ngIf="imageUrl.errors?.url">Please Enter valid Url</div>
                </div>
            </div>
            <button class="btn btn-primary">save</button>
        </form>
    </div>
    <div *ngIf="title.value || category.value || price.value" class="col-md-6">
        <div class="card" style="width: 18rem;">
            <img *ngIf="imageUrl.value" class="card-img-top" [src]="imageUrl.value" alt="Product Photo">
            <div class="card-body">
                <h5 class="card-title">{{title.value}}</h5>
                <h5 class="card-title">{{category.value}}</h5>
                <h5 class="card-title">{{price.value | currency:'USD'}}</h5>
            </div>
        </div>
    </div>
</div>
4

1 回答 1

0

products 不是您代码中的密封类。如果您认为它是一个动态类，那么 Angular 将无法理解这一点。简单的解决方案是创建 Product 类并在其中定义 title 属性。

于 2020-10-21T20:07:22.203 回答