传播类型只能从对象类型创建角度错误角度答案

【问题标题】：Spread types may only be created from object types angular error angular传播类型只能从对象类型创建角度错误角度
【发布时间】：2020-07-19 08:35:38
【问题描述】：

我是 Angular 的初学者，我正在尝试使用 Firestore 参考一些 youtube 视频来实现 CRUD 应用程序。

import { Component, OnInit } from '@angular/core';
import { OrdersService } from '../../shared/services/orders/orders.service';
import { Orders } from 'src/app/shared/models/orders/orders.model';

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

  list: Orders[];
  constructor(private service: OrdersService) { }

  ngOnInit(): void {

    this.service.getOrders().subscribe(actionArray =>{
      this.list = actionArray.map(item => {
        return {
          id: item.payload.doc.id,
          ...item.payload.doc.data()  //getting error over here
        } as Orders;
      })
    });

  }

}

如果我使用 ng serve 运行它，我的应用程序可以正常工作，并且可以根据需要显示数据，但是 ng build 它没有给出显示上述错误的输出。

【问题讨论】：

尝试在你的函数...(item.payload.doc.data() as {})中添加一个类型到数据返回或强制转换
这行返回什么item.payload.doc.data()？
请分享 stackblitz 示例
更新 TypeScript，大多数类型的限制已经解除。
item.payload.doc.data() 这行从数据库返回对象数据，然后淡入一个数组

标签： angular typescript firebase web google-cloud-firestore

【解决方案1】：

将您的代码更新为：

this.service.getOrders().subscribe(actionArray => {
    this.list = actionArray.map(item => {
        const data = item.payload.doc.data() as Orders;
        const id = item.payload.doc.id;
        return { id, ...data };
    })
});

【讨论】：

【解决方案2】：

好吧，我没有找到错误所在，所以我删除了错误持续存在的解构并手动检索了所有数据


    import { Component, OnInit } from '@angular/core';
    import { OrdersService } from '../../shared/services/orders/orders.service';
    
    @Component({
      selector: 'app-admin-orders',
      templateUrl: './admin-orders.component.html',
      styleUrls: ['./admin-orders.component.css']
    })
    export class AdminOrdersComponent implements OnInit {
    
      orders:any;
      constructor(private service: OrdersService) { }
    
      ngOnInit(): void {
    
        this.service.getOrders().subscribe(actionArray =>{
          this.orders = actionArray.map(item => {
            return {
              id: item.payload.doc.id,
              addr: item.payload.doc.data()['addr'],
              date: item.payload.doc.data()['date'],
              email: item.payload.doc.data()['email'],
              mobile: item.payload.doc.data()['mobile'],
              name: item.payload.doc.data()['name'],
              occassion: item.payload.doc.data()['occassion'],
              plan: item.payload.doc.data()['plan'],
              price: item.payload.doc.data()['price'],
              time: item.payload.doc.data()['time'],
            };
          })
        });
    
      }
    }

就像上面显示的那样......如果有人指出我在哪里做错了，那会很有帮助

【讨论】：