我使用了一个mat-table,这样用户就可以看到应用程序的companyConnection对象列表。
当用户单击“编辑”按钮并使用模态更新companyConnection时,会出现我的问题,但更改不会反映在表中。
对于故障排除,我已经在多个点将更新的对象打印到控制台,并已确认对象正在更新,似乎只是表没有更新的问题。
table.component.html
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z4">
<!-- Columns -->
<ng-container matColumnDef="DattoDomain">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Datto Domain </th>
<td mat-cell *matCellDef="let company"> {{company.dattoDomain}} </td>
</ng-container>
<ng-container matColumnDef="connectWiseId">
<th mat-header-cell *matHeaderCellDef mat-sort-header> ConnectWise Id </th>
<td mat-cell *matCellDef="let company"> {{company.connectWiseId}} </td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let company">
<button mat-icon-button (click)="openEditCompanyModal(company)">
<mat-icon>edit</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
export class CompanyTableComponent implements OnInit, AfterViewInit {
@ViewChild(MatSort) sort: MatSort;
@Input() companies: CompanyConnection[];
@Input() getError: boolean;
displayedColumns: string[] = ['DattoDomain', 'connectWiseId', 'actions'];
companies$: Observable<CompanyConnection[]> = of([]);
dataSource = new MatTableDataSource<CompanyConnection>();
constructor(
private companyDataService: CompanyDataService,
private dialog: MatDialog,
private changeDetectorRef: ChangeDetectorRef
) {}
ngOnInit() {
if (this.getError) {
this.companies$ = this.companyDataService.getErrorCompanyConnections();
} else {
this.companies$ = this.companyDataService.getHealthyCompanyConnections();
}
this.companies$.subscribe((companies: CompanyConnection[]) => {
this.dataSource.data = companies;
this.changeDetectorRef.detectChanges();
});
}
ngAfterViewInit() {
this.dataSource.sort = this.sort;
}
openEditCompanyModal(company: CompanyConnection) {
const dialogRef = this.dialog.open(CompanyModalComponent, {
data: { company }
});
dialogRef.afterClosed().subscribe((editedCompany: CompanyConnection) => {
if (editedCompany) {
// Update the existing company connection
this.companyDataService.editCompanyConnection(editedCompany).subscribe(
() => {},
error => {}
);
// Retrieve the updated company connection
this.companyDataService.getCompanyConnection(editedCompany.dattoDomain).subscribe(
(updatedCompany: CompanyConnection | undefined) => {
if (updatedCompany) {
console.log('Updated company connection:', updatedCompany);
} else {
console.log('Company connection not found');
}
},
error => {
console.log('Error retrieving company connection:', error);
}
);
}
});
}
}
此文件返回:Updated company connection: {dattoDomain: 'aptdynamics', connectWiseId: 'Bucks Communications', status: '200'}
下面是company-connection-service.service.ts文件中的方法
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;
}
return of(this.companies);
}
}
如果有任何其他代码,我可以提供,这将有助于,请让我知道!
谢谢!
1条答案
按热度按时间kr98yfug1#
更新后调用
next
。