Question

亲爱的我正在使用Angular 7开发页面，并且遇到错误TS2559：类型'BookInterface []'与类型'BookInterface'没有共同的属性，我更改了代码但是我仍然找不到解决方案，我在下面留下了代码，方法 getListBooks（）中引发了错误：这是我的文件 list-books.component.ts

import { BookInterface } from './../../../models/book';
import { DataApiService } from './../../../services/data-api.service';
import { Component, OnInit } from '@angular/core';
import {NgForm} from '@angular/forms';


@Component({
  selector: 'app-list-book',
  templateUrl: './list-book.component.html',
  styleUrls: ['./list-book.component.css']
})
export class ListBookComponent implements OnInit {

  constructor(private dataApi: DataApiService) { }
    private books: BookInterface = {};

  ngOnInit() {
    this.getListBooks();
  }

  getListBooks() {
    this.dataApi.getAllBooks().subscribe(books => {
      this.books  = books;
    });
  }

  onDelete() {
    console.log('LIBRO ELIMINADO');
  }

}

我还将 data-api.service.ts 的代码保留在调用界面的位置

import { map } from 'rxjs/operators';
import { Observable } from 'rxjs/internal/Observable';
import { Injectable } from '@angular/core';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore';
import { BookInterface } from '../models/book';


@Injectable({
  providedIn: 'root'
})
export class DataApiService {

  constructor(private afs: AngularFirestore) {
    this.bookCollecction = afs.collection<BookInterface>('books');
    this.books = this.bookCollecction.valueChanges();
  }

  private bookCollecction: AngularFirestoreCollection<BookInterface>;
  private books: Observable<BookInterface[]>;
  private bookDoc: AngularFirestoreDocument<BookInterface>;
  private book: Observable<BookInterface>;

  getAllBooks() {
    return this.books = this.bookCollecction.snapshotChanges()
    .pipe(map( changes => {
      return changes.map( action => {
        const data = action.payload.doc.data() as BookInterface;
        data.id = action.payload.doc.id;
        return data;
      });
    }));
  }
  // metodo que trae un libro a traves de su id
  getOneBook(idBook: string) {
    this.bookDoc = this.afs.doc<BookInterface>(`books/${idBook}`);
    return this.book = this.bookDoc.snapshotChanges().pipe(map(action => {
      if (action.payload.exists === false){
        return null;
      } else {
        const data = action.payload.data() as BookInterface;
        data.id = action.payload.id;
        return data;
      }
    }));
  }
  addBook(book: BookInterface): void {
    this.bookCollecction.add(book);
  }
  updateBook(book: BookInterface): void {
    let idBook = book.id;
    this.bookDoc = this.afs.doc<BookInterface>(`books/${idBook}`);
    this.bookDoc.update(book);
  }
  deleteBook(idBook: string): void {
    this.bookDoc = this.afs.doc<BookInterface>(`books/${idBook}`);
    this.bookDoc.delete();
  }
}

我当前使用的打字稿的版本是2.7.2，但也没有解决问题就对其进行了更新

Answer 1

您需要更改以下内容：

private books: BookInterface = {};

收件人：

private books: BookInterface[] = [];

错误TS2559：类型'BookInterface []'与类型'BookInterface'没有共同的属性

1 个答案: