在Angular6中添加内联类型时出错

Question

当我试图添加product.ts接口以便在product.ts方法中启用IntelliSense时，我得到了这个错误。

我遵循这个特定的angular+firebase教程，我固执地认为教程的防火墙和angularfire2版本比我的版本要低。

任何帮助都是很好的:)

错误

​

​

admin-products.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductService } from '../../product.service';
import { Subscription } from '../../../../node_modules/rxjs';
import { Product } from '../../models/product';

@Component({
  selector: 'app-admin-products',
  templateUrl: './admin-products.component.html',
  styleUrls: ['./admin-products.component.css']
})
export class AdminProductsComponent implements OnInit, OnDestroy {
  products: Product[];
  filteredProducts: any[];
  subscription: Subscription;

  constructor(private productService: ProductService) {
    this.subscription = this.productService.getAll()
      .subscribe(products => this.filteredProducts = this.products = products);
  }

  filter(query: string) {
    this.filteredProducts = (query) ?
      this.products.filter(p => p.title.toLowerCase().includes(query.toLowerCase())) : 
      this.products;
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

  ngOnInit() {
  }

}

型号/产品

export interface Product {
    key: string;
    title: string;
    price: number;
    category: string;
    imageUrl: string;
}

product.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { map, take } from 'rxjs/operators';

@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').snapshotChanges()
      .pipe(
        map( products => {
          return products.map( p => ({
            key: p.payload.key, ...p.payload.val()
          }))
        })
      );
  }
}

Answer 1

在getAll方法中，返回{key: string}[]类型的值

您将它分配给this.filteredProducts和this.products，它们是不同类型的Product。

因此，您必须根据您的业务需求执行以下操作之一。

1. 使key以外的字段在产品接口中可选。
2. 从getAll方法返回Product类型的值。