Question

我遇到此问题“类型'{键：字符串;}'无法分配给类型'产品'。”当我向产品变量数组中添加产品接口类型时。

这是我的代码：

product.ts

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

productService.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from 'angularfire2/database';
import { map } 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(actions =>
          actions.map(a => ({ key: a.key, ...a.payload.val() }))
        )
      );
  }

  get(productId){
    return this.db.object('/products/' + productId).valueChanges();
  }

  update(productId, product){
    return this.db.object('/products/' + productId).update(product);
  }

  delete(productId){
    return this.db.object('/products/' + productId).remove();
  }
}

admin-product.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductService } from 'src/app/product.service';
import { Subscription } from 'rxjs';
import { Product } from 'src/app/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;
  dataSource;
  displayedColumns: string[] = ['title', 'price', 'action'];

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

  ngOnInit() { }

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

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

终端错误

ERROR in src/app/admin/admin-products/admin-products.component.ts(19,100): error TS2322: Type '{ key: string; }[]' is not assignable to type 'Product[]'.

src / app / admin / admin-products / admin-products.component.ts（19,100）：错误TS2322：键入'{键：字符串； } []'不可分配给'Product []'类型。输入'{键：字符串； }”不可分配给“产品”类型。类型'{key：string;类型中缺少属性'title'； }'。

有人可以帮我吗？

Answer 1

您可以console.log this.db.list('/products').snapshotChanges()中返回的可观察对象，并查看其上有哪些参数，可能还有更多的东西仅是产品，因此您必须从该可观察对象中选择所需的内容。

Answer 2

最可能的问题是，您试图将从服务返回的通用对象用作类型化的对象。我喜欢用.map和Object.assign()来掩盖事物，例如：

  getAll(){
    return this.db.list('/products').snapshotChanges()
      .pipe(
        map(actions =>
          actions.map(a => (Object.assign(new ClassThatImplementsProductInferface(), a))
        )
      );
  }

这假设从snapshotChanges()返回的数据具有所有数据，并且可能是产品接口。

Answer 3

只是一个建议，

似乎您已将某些内容映射并分配给提到的名称（键）。

getAll(){
    return this.db.list('/products').snapshotChanges()
      .pipe(
        map(actions =>
          actions.map(a => ({ key: a.key, ...a.payload.val() })) //here you have made something strange.
        )
      );
  }

解决方案：- 您需要映射适当的接口模型变量。

example,
  .map( {title: a.something;
    price: a.something;
    category: a.something;
    imageUrl: a.something
})

Answer 4

谢谢大家重播。

我在您的帮助下使用此代码在Karnan Muthukumar的帮助下工作：

getAll(){
    return this.db.list('/products').snapshotChanges()
      .pipe(
        map(actions =>
          actions.map(a => ({ key: a.key, ...a.payload.val() } as Product))
        )
      );
  }

输入'{键：字符串； }”不可分配给“产品”类型Angular 7

4 个答案: