Question

我的组件文件

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';
import { Product } from './product';
import { take } from 'rxjs/operators';

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

categories$;

product: any = {};

  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).valueChanges().pipe(take(1))
.subscribe(p => this.product = p);
    }
   }

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

  ngOnInit() {
  }

}

我的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>
        <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">
      </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>
          <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>
        <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>
        <p class="card-text"> {{product.price | currency:'USD':true}} </p>

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

这是我的我的Product.service：文件

import { Product } from './admin/product-forms/product';
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() {
  return this.db.list('/products');
}

get(productId): Observable<any> {
  return this.db.object('/products' + productId).valueChanges();
}
}

我在以下行收到此错误：“

    if (id) { 
this.productservice
    .get(id)
    .valueChanges()
    .pipe(take(1))
    .subscribe(p => this.product = p);

并且当我删除valueChanges（）时。我遇到了另一个错误： 当我在部署项目后单击浏览器中的任何输入字段时。然后我可以克服错误...

“ TypeError：无法读取未定义的属性'title'”。

有人可以帮我解决这个问题吗？谢谢！

Answer 1

您的产品服务的get(id)方法返回一个Observable。您可能在FormControl之类的工具上看到了valueChanges()，但是在使用Observables时，几乎总是从pipe()或subscribe()开始。

Learn RxJs是有用的资源。 Angular文档也有很多很好的例子。

类型'Observable <any>'不存在属性'valueChanges'

1 个答案: