如何在 Angular 双向绑定方法中绑定 Firebase 单个 Observable

如何解决如何在 Angular 双向绑定方法中绑定 Firebase 单个 Observable

我想使用双向绑定将单个 Observable 绑定到 Angular 中的一个元素。我已经尝试过下面的场景，但它得到了错误。我该如何解决？。

ProductService.ts

import { AngularFireDatabase } from '@angular/fire/database';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class ProductService {

  constructor(private db: AngularFireDatabase) { }

  create(product) {
    return this.db.list('/products').push(product);
  }
  getAll(): Observable<any> {
    return this.db.list('/products').snapshotChanges() as Observable<any>;
  }

//错误 获取（产品 ID）：可观察 { 将 this.db.object('/products' + productId).valueChanges() 作为 Observable 返回； } }

ProductFormComponent.ts

import { Router,ActivatedRoute } from '@angular/router';
import { ProductService } from './../../product.service';
import { CategoryService } from './../../category.service';
import { Component,OnInit } from '@angular/core';
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: {};
  id: string;
  constructor(
    private router: Router,private route: ActivatedRoute,private categoryService: CategoryService,private productService: ProductService) {

    this.categories$ = categoryService.getCategories();

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

  ngOnInit(): void {
  }


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

错误

product-form.component.html

<div class="row">
  <div class="col-md-6">
    <form #f="ngForm" (ngSubmit)="save(f.value)">
      <div class="form-group col-md-6 mb-3">
        <label for="title" class="form-label">Product Name</label>

        <input #title="ngModel" [(ngModel)]="product.name" name="name" type="text" class="form-control" id="title"
          aria-describedby="productHelp" required>
        <div id="productHelp" class="form-text">Enter Product Name.</div>
        <div class="alert alert-danger" *ngIf="title.touched && title.invalid">
          Product Name is Required.
        </div>
      </div>
      <div class="form-group mb-3">
        <label for="price" class="form-label">Price</label>
        <div class="input-group mb-3">
          <span class="input-group-text">₹</span>
          <input #price="ngModel" [(ngModel)]="product.price" name="price" type="number" class="form-control" id="price"
            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 'zero' or Higher.</div>
        </div>
      </div>
      <div class="form-group mb-3">
        <label for="category" class="form-label">Category</label>
        <select #category="ngModel" [(ngModel)]="product.category" name="category" id="category" class="form-control"
          required>
          <option value=""></option>
          <option *ngFor="let c of categories$ | async" [value]="c.key">
            {{c.payload.val().name}}
          </option>
        </select>
        <div class="alert alert-danger" *ngIf="category.touched && category.invalid">
          Category is Required.
        </div>
      </div>
      <div class="form-group mb-3">
        <label for="imageUrl" class="form-label">Image Url</label>
        <input #imageUrl="ngModel" [(ngModel)]="product.imageUrl" name="imageUrl" type="text" class="form-control"
          id="imageUrl" 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: 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:'INR':'symbol'}}</p>
        <h6>Category<span class="badge rounded-pill bg-secondary">{{category.value}}</span></h6>
      </div>
    </div>
  </div>
</div>