Question

角度

在前几个标签中，我有一个输入标签input #title =“ ngModel” [（ngModel）] =“ product.title”此代码在这里，我尝试使用两种方式绑定以能够编辑表单和从Firebase数据库获得的值。我在product-form.component.ts中创建了一个空的产品对象，但出现属性类型错误。我不确定为什么空产品对象会导致错误，因为我正在观看的教程具有相同的方法。目标是能够使用该空产品对象或其他方法来进行双向绑定

product-form.component.ts
import { ProductService } from './../../product.service';
import { CategoryService } from './../../category.service';
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { take } from 'rxjs/operators';

@Component({
  selector: 'app-product-form',
  templateUrl: './product-form.component.html',
  styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
  categories$;
  product = {};


  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private categoryService: CategoryService, 
    private productService: ProductService) 
    {
    this.categories$ = categoryService.getCategories();
    let id = this.route.snapshot.paramMap.get('id');
    if (id) this.productService.get(id).pipe(take(1)).subscribe(p => this.product = p);
    }

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

  ngOnInit(): void {
  }

}

product-form.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>
                <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-text">$</span>
                    <input #price="ngModel" ngModel name ="price" id = "price" type="number" class="form-control" required>
                </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.</div>
                </div>

            </div>

            <div class="form-group">
                <label for="category">Category</label>
                <select #category="ngModel" ngModel name="category" id = "category" type="text" class="form-control" required>
                <option  value=""></option>
                <option *ngFor = "let c of categories$ | async" [value] = "c.name">
                    {{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 name= "imageUrl" id = "imageUrl" type="url" class="form-control" required>
                <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">Invalid URL</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]="imageUrl.value" class="card-img-top">
            <div class="card-body">
              <h5 class="card-title">{{title.value}}</h5>
              <p class="card-text">{{price.value | currency:'USD':true}}</p>
            </div>
          </div>
    </div>

</div>


product.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private db: AngularFireDatabase) { }

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

    // const itemsRef = this.db.list('products');
    // return itemsRef.push(product);
  }

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

  }

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

Answer 1

有两种方法可以做到这一点

方法1

声明接口

export interface Product {
  title: string
}

按如下所示更改“组件代码”部分

来自

product = {};

收件人

product:Product;

方法2-这可能会有副作用

更改HTML

来自

<input #title = "ngModel" [(ngModel)]="product.title" name = "title" id = "title" type="text" class="form-control" required>

收件人

<input #title = "ngModel" [(ngModel)]="product['title']" name = "title" id = "title" type="text" class="form-control" required>

类型“ {}”上不存在属性“标题”

1 个答案: