本文旨在解决Angular Material Table在数据源更新后，视图未能及时刷新的问题。我们将深入探讨数据绑定的机制，并提供有效的解决方案，确保表格数据与底层数据模型保持同步。通过本文，你将学会如何正确地更新`MatTableDataSource`，并避免常见的陷阱。
在Angular Material中，MatTable组件依赖于MatTableDataSource来管理和展示数据。当数据源发生变化时，表格需要能够检测到这些变化并相应地更新视图。如果表格没有正确更新，通常是因为MatTableDataSource没有被正确地通知数据已经更改。
理解MatTableDataSource和数据绑定
MatTableDataSource 充当了数据和表格之间的桥梁。它接收一个数据数组，并提供排序、过滤和分页等功能。当数据源中的数据发生更改时，需要通知 MatTableDataSource 这些更改，以便它能够触发视图更新。
在你的 CompanyTableComponent 中，你使用了 BehaviorSubject 来管理公司数据：
private companiesSubject = new BehaviorSubject<CompanyConnection[]>(this.companies);
getCompanyConnections(): Observable<CompanyConnection[]> {
return this.companiesSubject.asObservable();
}BehaviorSubject 是一个 RxJS Subject，它会存储当前值，并且当有新的订阅者订阅时，会立即发出这个值。 当你修改了 companies 数组时，需要使用 companiesSubject.next(this.companies) 来通知所有订阅者（包括 MatTableDataSource）数据已经更新。
解决数据未更新的问题
问题的关键在于 editCompanyConnection 方法中，虽然你更新了 companies 数组，但是没有通知 companiesSubject 数据已经更改。
editCompanyConnection(updatedCompany: CompanyConnection): Observable<CompanyConnection[]> {
const index = this.companies.findIndex(c => c.dattoDomain === updatedCompany.dattoDomain);
if (index !== -1) {
this.companies[index] = updatedCompany;
// 缺少了通知 companiesSubject 的步骤
}
return of(this.companies);
}要解决这个问题，你需要在更新 companies 数组后，调用 companiesSubject.next(this.companies) 来通知所有订阅者数据已经更改。修改后的 editCompanyConnection 方法如下：
editCompanyConnection(updatedCompany: CompanyConnection): Observable<CompanyConnection[]> {
const index = this.companies.findIndex(c => c.dattoDomain === updatedCompany.dattoDomain);
if (index !== -1) {
this.companies[index] = updatedCompany;
this.companiesSubject.next(this.companies); // 添加这一行
}
return of(this.companies);
}通过调用 companiesSubject.next(this.companies)，你通知了 companiesSubject 的所有订阅者（包括你的组件中订阅 this.companies$ 的部分），数据已经更新。这将触发 MatTableDataSource 的更新，从而使表格显示最新的数据。
完整示例代码
以下是 CompanyDataService 的完整示例代码，包含修正后的 editCompanyConnection 方法：
import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, of } from 'rxjs';
import { map } from 'rxjs/operators';
export interface CompanyConnection {
dattoDomain: string;
connectWiseId: string;
status: string;
}
@Injectable({
providedIn: 'root'
})
export class CompanyDataService {
private companies: CompanyConnection[] = [
{
dattoDomain: "aptdynamics",
connectWiseId: "Apartment Dynamics",
status: "200"
},
{
dattoDomain: "buckscomm",
connectWiseId: "Bucks Communications",
status: "200"
},
{
dattoDomain: "cardinalconcretecompany",
connectWiseId: "Cardinal Concrete Company",
status: "200"
},
{
dattoDomain: "centralcarolinaseeding",
connectWiseId: "Central Carolina Seeding",
status: "404"
},
];
private companiesSubject = new BehaviorSubject<CompanyConnection[]>(this.companies);
constructor() { }
getCompanyConnections(): Observable<CompanyConnection[]> {
return this.companiesSubject.asObservable();
}
getCompanyConnection(dattoDomain: string): Observable<CompanyConnection | undefined> {
return this.getCompanyConnections().pipe(
map((companies: CompanyConnection[]) => {
return companies.find((company: CompanyConnection) => {
return company.dattoDomain === dattoDomain;
});
})
);
}
getHealthyCompanyConnections(): Observable<CompanyConnection[]> {
return this.getCompanyConnections().pipe(
map((companies: CompanyConnection[]) => {
return companies.filter((company: CompanyConnection) => {
return company.status === "200";
});
})
);
}
getErrorCompanyConnections(): Observable<CompanyConnection[]> {
return this.getCompanyConnections().pipe(
map((companies: CompanyConnection[]) => {
return companies.filter((company: CompanyConnection) => {
return company.status !== "200";
});
})
);
}
addCompanyConnection(company: CompanyConnection): Observable<CompanyConnection[]> {
this.companies.push(company);
this.companiesSubject.next(this.companies);
return of(this.companies);
}
editCompanyConnection(updatedCompany: CompanyConnection): Observable<CompanyConnection[]> {
const index = this.companies.findIndex(c => c.dattoDomain === updatedCompany.dattoDomain);
if (index !== -1) {
this.companies[index] = updatedCompany;
this.companiesSubject.next(this.companies); // 添加这一行
}
return of(this.companies);
}
}其他注意事项
Change Detection: Angular 的 change detection 机制负责检测组件数据的变化并更新视图。 在某些情况下，Angular 可能无法检测到数据的变化。 你可以使用 ChangeDetectorRef 手动触发 change detection。 在你的 ngOnInit 方法中，你已经使用了 this.changeDetectorRef.detectChanges();。 这通常是不必要的，因为 BehaviorSubject.next() 会自动触发 change detection。 然而，如果表格仍然没有更新，可以尝试在更新数据后再次调用 this.changeDetectorRef.detectChanges();。
-
Immutability: 在 Angular 中，推荐使用不可变数据结构。 这意味着在更新数据时，不要直接修改原始数据，而是创建一个新的数据副本。 这可以提高性能并避免一些潜在的问题。 你可以使用 spread operator (...) 或 Object.assign() 来创建数据副本。
例如，在 editCompanyConnection 方法中，你可以使用以下代码来更新 companies 数组：
editCompanyConnection(updatedCompany: CompanyConnection): Observable<CompanyConnection[]> { const index = this.companies.findIndex(c => c.dattoDomain === updatedCompany.dattoDomain); if (index !== -1) { this.companies = [ ...this.companies.slice(0, index), updatedCompany, ...this.companies.slice(index + 1) ]; this.companiesSubject.next(this.companies); // 添加这一行 } return of(this.companies); }这种方法创建了一个新的 companies 数组，而不是直接修改原始数组。
Debugging: 如果表格仍然没有更新，可以使用 Angular DevTools 来检查组件的数据绑定和 change detection。 这可以帮助你找到问题的根源。
总结
要确保 Angular Material Table 在数据源更新后正确更新，你需要：
- 使用 MatTableDataSource 来管理表格数据。
- 使用 BehaviorSubject 或其他 RxJS Subject 来管理数据源。
- 在更新数据源后，调用 subject.next(newData) 来通知所有订阅者数据已经更改。
- 考虑使用不可变数据结构来提高性能和避免潜在的问题。
- 使用 Angular DevTools 来调试数据绑定和 change detection。
通过遵循这些步骤，你可以确保你的 Angular Material Table 始终显示最新的数据。
