Question

我还在学习RxJS并且我正在尝试设置一个数据表来观察通过服务更改的数据流，有人可以查看我的代码并告诉我如何从这个可观察的方式获得正确的响应？

search.service.ts

@Injectable()
export class SearchService {
    constructor(
        private apiService: ApiService
    ) { }

    private searchSource = new BehaviorSubject<object>(this.getInitialCollections());

    public currentMessage = this.searchSource.asObservable();

    getInitialCollections(): object {
        return this.apiService.get('/cmt-api/search/merch/collections/_search');
    }

    search(phrase: string) {
        let results = this.apiService.post('/cmt-api/search/merch/collections/_search', { phrase: phrase })
            .subscribe(data => this.changeMessage(data));
    }

    changeMessage(results: object) {
        this.searchSource.next(results)
    }

    readCollectionResult(result: any): Asset[] {
        let data = JSON.parse(result._body).data;
        return data.map(asset => {
            return {
                id: asset.id,
                collectionName: asset.collectionName,
                collectionId: asset.collectionId,
                objectType: asset.objectType,
                displayType: asset.displayType,
                size: asset.size,
                createDate: asset.createDate,
                modifiedDate: asset.modifiedDate,
                publishedDate: asset.publishedDate,
                parentFolderId: asset.parentFolderId
            };
        });
    }
}

datatable.component.ts

@Component({
    selector: 'mat-datatable',
    styleUrls: ['./datatable.component.scss'],
    templateUrl: './datatable.component.html',
})
export class DatatableComponent {
    displayedColumns = ['id', 'collectionName', 'displayType', 'size'];
    datatableDatabase: SearchDataSet | null;
    dataSource: SearchDataSource | null;

    constructor(
        private searchService: SearchService
    ) {
        this.datatableDatabase = new SearchDataSet(searchService);
        this.dataSource = new SearchDataSource(this.datatableDatabase);
    }
}

export class SearchDataSet {
    dataChange: BehaviorSubject<Asset[]> = new BehaviorSubject<Asset[]>([]);
    get data(): object { return this.dataChange.value; }

    constructor(
        private searchService: SearchService
    ) { }

    getCollections() {
        this.searchService.currentMessage.subscribe(results => {
            this.dataChange.next(this.searchService.readCollectionResult(results))
        });
    }
}

export class SearchDataSource extends DataSource<Asset> {
    constructor(private _searchDataset: SearchDataSet) {
        super();
    }

    /** Connect function called by the table to retrieve one stream containing the data to render. */
    connect(): Observable<Asset[]> {
        return this._searchDataset.dataChange
            .switchMap(() => { <----- ERROR (see below)
                return this._searchDataset.getCollections()
            });
    }

    disconnect() { }
}

错误：

Argument of type '() => void' is not assignable to parameter of type '(value: Asset[], index: number) => ObservableInput<Asset[]>'.

Answer 1

试试这个。 getCollections需要返回一个Observable

getCollections() {
    return this.searchService.currentMessage.map(results => {
       return this.searchService.readCollectionResult(results)
    }).map(value=>{
       this.dataChange.next(value) 
       return value
    });   
}

使用switchMap类型错误可观察

1 个答案: