Observable 數組的 ngx 分頁

Question

當我對項目使用 ngx 分頁時：Array<any> = [] 沒有問題，但是當我對項目使用時：Observable<any[]> 我收到錯誤消息：

錯誤：src/app/home-page/home-page.component.html:18:36 - 錯誤 TS2345：'any[] 類型的參數 | null' 不可分配給 'Collection< unknown>' 類型的參數。

18 <li *ngFor="let item of items | async | paginate: { itemsPerPage: 12, currentPage: p }">{{ item }}

怎么解決？

家.html：

 <div >
        <ul>
            <li *ngFor="let item of items | async  | paginate: { itemsPerPage: 12, currentPage: p }">{{ item }}</li>
        </ul>
        <pagination-controls (pageChange)='p = $event'></pagination-controls>
</div>

主頁.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { Observable } from 'rxjs/internal/Observable';
import { ProductService } from '../services/product.service';
import { UserServiceService } from '../services/user-service.service';


@Component({
  selector: 'app-home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.css']
})
export class HomePageComponent implements OnInit {
 
  items: Observable<any[]>  ;

  constructor(private db : AngularFireDatabase,private userS : UserServiceService,private pd: ProductService ) {
   this.items = this.pd.items
  }

產品.服務.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { map } from 'rxjs';
import { Observable } from 'rxjs/internal/Observable';
import { UserServiceService } from './user-service.service';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  items: Observable<any[]>;
  constructor(private db: AngularFireDatabase,private userS : UserServiceService) {
    this.getProducts()
  }
  getProducts(){
    this.items = this.db.list("collections").snapshotChanges().pipe(
      map(changes =>
        changes.map(c => ({ key: c.payload.key, ...c.payload.val() as {} }))

      )
    );
  }
}

Answer 1

該類型在 javascript map 中丟失，在這里您只需像這樣手動設置它。

import { Injectable } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/compat/database';
import { map } from 'rxjs';
import { Observable } from 'rxjs/internal/Observable';
import { UserServiceService } from './user-service.service';

@Injectable({
  providedIn: 'root'
})
export class ProductService {
  items: Observable<any[]>;
  constructor(private db: AngularFireDatabase,private userS : UserServiceService) {
    this.getProducts()
  }
  getProducts(){
    this.items = <Observable<Array<any>>>this.db.list("collections").snapshotChanges().pipe(
      map(changes =>
        <Array<any>>changes.map(c => <any>({ key: c.payload.key, ...c.payload.val() as {} }))
      )
    );
  }
}

Answer 2

確實Error在html這邊。 但錯誤表明這是兩種types不匹配的錯誤。

嘗試以下可能對您有幫助的事情

1-使用空/未定義檢查! 因為它說它不能分配給any[] | null any[] | null並將$與您正在制作的變量一起使用Observable這是聲明Observable Variable的專業實踐

items$!: Observable<any[]>;

2-我是如果你有任何 class 或items接口提供給Observable 。

items$!: Observable <itemsSchema[] | any>;

3-我遇到了同樣的問題，我的Observable Variable是這樣的

variable$!: Observable<mySchema[]>;

然后我用它來解決我的問題

variable$!: Observable<mySchema[] | any>;

4- 由於我們兩個的問題相同但數據庫和 function 技術不同，因此通過使用上述方法之一，特別是2它可能會產生一些其他不兼容的小錯誤或其他問題。 所以我建議不要驚慌，只需嘗試對代碼進行一些小的更改