MD-table带有数据源未更新删除

Question

i具有一个具有材料设计表的角组件，其中显示了对象。该组件通过数据源获取数据。数据源从HTTP服务中获取数据。表本身可以过滤。

那是我的代码，简化 - 如果需要的话，请随时要求有关某些事情的更多信息。

customer.component.html

<md-input-container floatPlaceholder="never">
    <input mdInput #filter placeholder="Filter customers">
</md-input-container>
<md-table #table [dataSource]="dataSource">
    <ng-container cdkColumnDef="customerid">
        <md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
        <md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
    </ng-container>
    <ng-container cdkColumnDef="remove">
        <md-header-cell *cdkHeaderCellDef></md-header-cell>
        <md-cell *cdkCellDef="let row"> 
            <button md-button (click)="deleteCustomer(row)">
                Remove Customer
            </button> 
        </md-cell>
    </ng-container>
    <md-header-row *cdkHeaderRowDef="displayedColumns">
    </md-header-row>
    <md-row *cdkRowDef="let row; columns: displayedColumns;">
    </md-row>
</md-table>

customer.component.ts

export class CustomerOverviewComponent implements OnInit {
    public displayedColumns: string[] = [
        "customerid", "remove"
    ];
    public dataSource: CustomerOverviewDataSource | null;
    @ViewChild("filter") filter: ElementRef;
     constructor(private dataService: CustomerOverviewService,
                 private cdRef: ChangeDetectorRef) {
        this.initDataSource(dataService);
    }
    ngOnInit(): void {
        Observable.fromEvent(this.filter.nativeElement, "keyup")
            .debounceTime(150)
            .subscribe(() => {
                if (!this.dataSource) { return; }
                this.dataSource.filter = this.filter.nativeElement.value;
            });
    }
    public deleteCustomer(customer: CustomerOverview): void {
        this.dataSource.disconnect();
        this.dataService
            .Delete(customer.id)
            .subscribe(data => {
                this.error.info(`Customer with Id: ${data._body} deleted!`);
            }, (err) => {
                this.error.error(`Unable to delete customer: ${err.message}`);
            });
        this.dataSource.connect();
    }
    private initDataSource(dataService: CustomerOverviewService): void {
        this.dataSource = new CustomerOverviewDataSource(this.dataService);
    }
}

customer.service.ts

@Injectable()
export class CustomerOverviewService {
    private actionUrl: string;
    private headers: Headers;
    dataChange: BehaviorSubject<CustomerOverview[]> = new BehaviorSubject<CustomerOverview[]>([]);
    get data(): CustomerOverview[] { return this.dataChange.value; }
    constructor(private http: Http, private authHttp: AuthHttpService, public snackBar: MdSnackBar) {
        this.actionUrl = Configuration.API_SERVER + "api/customeroverview/";
        this.headers = new Headers();
        this.headers.append("Content-Type", "application/json; charset=utf-8");
        this.headers.append("Accept", "application/json");
        this.GetAll().forEach(s => this.dataChange.next(s));
    }
    public GetAll = (): Observable<CustomerOverview[]> => {
        return this.authHttp
            .get(this.actionUrl)
            .map((response: Response) => <CustomerOverview[]>response.json())
            .publishReplay(1)
            .refCount();
    }
    public Delete = (id: number): Observable<any> => {
        return this.authHttp.delete(this.actionUrl + id)
            .catch(console.log("Delete Catch"));
    }
}
export class CustomerOverviewDataSource extends DataSource<any> {
    _filterChange = new BehaviorSubject("");
    get filter(): string { return this._filterChange.value; }
    set filter(filter: string) { this._filterChange.next(filter); }
    constructor(private dataService: CustomerOverviewService) {
        super();
    }
    /** Connect function called by the table to retrieve one stream containing the data to render. */
    connect(): Observable<CustomerOverview[]> {
        const displayDataChanges: any = [
            this.dataService.GetAll(),
            this._filterChange,];
        return Observable.merge(...displayDataChanges).map(() => {
            return this.dataService.data.slice().filter((item: CustomerOverview) => {
                let searchStr: string = (item.gender + item.lastname + item.firstname + item.personalnumber
                    + item.consultant + item.hasConsultingEntities).toLowerCase();
                return searchStr.indexOf(this.filter.toLowerCase()) !== -1;
            });
        });
    }
    disconnect(): void {
        console.log("disconnect");
    }
}

当我从表中删除实体时，它不会更新。对象存储在哪里，所以我知道我必须更新什么？我感觉到html得到的对象处于常数变量displayDatachanges中，我无法更改此？

感谢您对正确指示的任何提示。

Answer 1

你很接近，但是这里有一些事情：

1. 我不知道手动调用connect()和disconnect()的有效用例。表只能调用AFAIK connect()一次，而disconnect()是在销毁该表时进行的回调，以防您需要进行任何类型的取消订阅或其他清理。您可以从deleteCustomer()删除这些行。

2. displayDataChanges包括dataService.GetAll()。这意味着，当表由表调用connect()并订阅结果时，GetAll()将运行。我怀疑这是您想要的，因为GetAll()已经在CustomerOverviewService的构造函数中调用和缓存。您可能希望dataService.dataChange（BehaviorSubject）成为displayDataChanges的一部分。这意味着，每当您致电dataChange.next(vals)时，您的connect()可观察到的可发出新值，并且表将更新。

3. 当调用Delete()时，您的服务状态不会更改。每当请求完成时，您都应使用next()将BehaviorSubject推进到具有新值的dataChange。您可以分类当前的data并删除条目，也可以再次致电GetAll()。无论哪种情况，next() dataChange中的新结果都可以重新渲染。