為什么 Angular 要求我提供這些屬性，我該如何解決？

Question

/* Services: client-service.ts */
import { Injectable } from '@angular/core';  
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore'; 
import { Observable } from 'rxjs'; 
import { Client } from '../models/Client';
import 'rxjs/add/operator/map';

@Injectable({
  providedIn: 'root'
})
export class ClientService {
  clientsCollection!: AngularFirestoreCollection<Client>;
  clientDoc!: AngularFirestoreDocument<Client>;
  clients!: Observable<Client>[];
  client!: Observable<Client>;

 
  constructor(private afs: AngularFirestore) {
    this.clientsCollection = this.afs.collection('clients', ref => ref.orderBy('lastName', 'asc'));
  }

  getClients(): Observable<Client[]> {
    // Get clients with the id
    this.clients = this.clientsCollection.snapshotChanges().map(changes => {
      return changes.map(action => {
        const data = action.payload.doc.data() as Client;
        data.id = action.payload.doc.id;
        return data;
      });
    });
    return this.clients;
  }

}

我收到這兩個錯誤：

• 類型 'Observable<Client[]>' 缺少來自類型 'Observable[]' 的以下屬性：length、pop、push、concat 等 24 個。
• 類型 'Observable[]' 缺少類型 'Observable<Client[]>' 中的以下屬性：_isScalar、源、運算符、提升等 5 個。

這是訂閱它的組件：

/* the client-component.ts file */
import { Component, OnInit } from '@angular/core';
import { ClientService } from '../../services/client.service';
import { Client } from '../../models/Client';

@Component({
  selector: 'app-clients',
  templateUrl: './clients.component.html',
  styleUrls: ['./clients.component.css']
})
export class ClientsComponent implements OnInit {
/* Properties */
clients!: Client[];

  constructor(private clientService: ClientService) { }

  ngOnInit(): void {
    this.clientService.getClients().subscribe(clients => this.clients = clients);
  }

}

Answer 1

您正在對可觀察類型進行映射。 這需要看起來像這樣：

getClients(): Observable<Client[]> {
this.clients = this.clientsCollection.snapshotChanges()
  .pipe(
      map(c => {
        return c.map(a => {
          let data = a.payload.doc.data() as Client;
          data.id = a.payload.doc.id;
          return data;
        });
    });
  return this.clients;
  }