Question

我对Angle 7还是陌生的，但对于发布的类似问题却找不到合适的答案。

我在angular-cli的类型“ void”中不存在属性“ subscribe”。我尝试从rxjs导入订阅，但没有找到该库。

问题出在UpdateRecord函数中！

product.component.ts代码：

以下代码存在于产品的compoent.ts中

import { Component, OnInit } from '@angular/core';
import { ProductService } from 'src/app/shared/product.service';
import { NgForm } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { filter, map } from 'rxjs/operators';
@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  constructor(private service : ProductService, private toastr : ToastrService) { }

  ngOnInit() {
    this.resetForm();
  }

  resetForm(form?: NgForm) {
    if (form != null)
      form.resetForm();
    this.service.formData = {
      ProductID: null,
      ProductName: '',
      ProductDescription: '',
      Price: 0.00,
      Image: '',
      Qte: null
    }
  }


  onSubmit(form: NgForm) {
    if (form.value.ProductID == null)
      this.insertRecord(form);
    else
      this.updateRecord(form);
  }

  insertRecord(form: NgForm) {
    this.service.postProduct(form.value).subscribe(res => {
      this.toastr.success('Inserted successfully', 'Product. Register');
      this.resetForm(form);
      this.service.refreshList();
    });
  }

  updateRecord(form: NgForm) {
     this.service.putProduct(form.value).subscribe(res => {
       this.toastr.success('Updated successfully', 'Product. Update');
       this.resetForm(form);
      this.service.refreshList();
     });

  }

}

product.service.ts代码：

与产品相关的服务文件中存在以下代码

import { Injectable } from '@angular/core';
import { Product } from './product.model';

import { HttpClient } from "@angular/common/http";

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

  formData : Product
  list : Product[]
  readonly rootURL= 'http://localhost:50369/api'

  constructor(private http : HttpClient) { }

  postProduct(formData : Product){
    return this.http.post(this.rootURL+'/Product', formData);
  }

  refreshList(){
    return this.http.get(this.rootURL+'/Product')
    .toPromise().then(res => this.list = res as Product[]);
  }

  putProduct(formData : Product){
    this.http.put(this.rootURL+'/Product/'+formData.ProductID,FormData);
  }

}

预先感谢

Answer 1

您的HttpClient.put函数似乎使用不正确（应在传递对象时将类作为参数传递）。

在此StackBlitz example中寻找功能updateHero()。

/** PUT: update the hero on the server. Returns the updated hero upon success. */
  updateHero (hero: Hero): Observable<Hero> {
    httpOptions.headers =
      httpOptions.headers.set('Authorization', 'my-new-auth-token');

    return this.http.put<Hero>(this.heroesUrl, hero, httpOptions)
      .pipe(
        catchError(this.handleError('updateHero', hero))
      );
  }

Answer 2

我错过了回报：

因此在product.service.ts中的putProduct函数中更新为：

 putProduct(formData : Product){
    return this.http.put(this.rootURL+'/Product/'+formData.ProductID,FormData);
  }

现在正在工作！

无效类型中不存在如何解决订阅的问题

2 个答案: