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

Question

当我尝试添加 product.ts 接口时出现此错误，以便我可以在产品筛选方法中启用 IntelliSense。

我一直在关注这个 angular+firebase 教程，我固执地认为该教程的 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() {
  }

}

model/product.ts

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 不同类型产品.

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

使 key 以外的字段在 Product 界面中可选。
Return Product 类型的值来自 getAll 方法。

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

Error in adding in-line type in Angular6

firebase

angularfire2

angular

angular6