为什么我的Angular Material表格在数据源更改时不更新?

huangapple go评论105阅读模式
英文:

Why doesn't my Angular Material table update when the data source is changed?

问题

我使用mat-table来让用户查看应用程序的公司连接对象列表。

问题出现在用户点击编辑按钮并使用模态框更新公司连接时,表格没有反映出变化。

为了排除故障,我已经在多个地方将更新后的对象打印到控制台,并确认对象正在更新,似乎只是表格没有更新。

表格组件的HTML部分:

  1. <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z4">
  2. <!-- 列定义 -->
  3. <ng-container matColumnDef="DattoDomain">
  4. <th mat-header-cell *matHeaderCellDef mat-sort-header> Datto 域名 </th>
  5. <td mat-cell *matCellDef="let company"> {{company.dattoDomain}} </td>
  6. </ng-container>
  7. <ng-container matColumnDef="connectWiseId">
  8. <th mat-header-cell *matHeaderCellDef mat-sort-header> ConnectWise ID </th>
  9. <td mat-cell *matCellDef="let company"> {{company.connectWiseId}} </td>
  10. </ng-container>
  11. <ng-container matColumnDef="actions">
  12. <th mat-header-cell *matHeaderCellDef>操作</th>
  13. <td mat-cell *matCellDef="let company">
  14. <button mat-icon-button (click)="openEditCompanyModal(company)">
  15. <mat-icon>edit</mat-icon>
  16. </button>
  17. </td>
  18. </ng-container>
  19. <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  20. <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  21. </table>

表格组件的 TypeScript 部分:

  1. export class CompanyTableComponent implements OnInit, AfterViewInit {
  2. @ViewChild(MatSort) sort: MatSort;
  3. @Input() companies: CompanyConnection[];
  4. @Input() getError: boolean;
  5. displayedColumns: string[] = ['DattoDomain', 'connectWiseId', 'actions'];
  6. companies$: Observable<CompanyConnection[]> = of([]);
  7. dataSource = new MatTableDataSource<CompanyConnection>();
  8. constructor(
  9. private companyDataService: CompanyDataService,
  10. private dialog: MatDialog,
  11. private changeDetectorRef: ChangeDetectorRef
  12. ) {}
  13. ngOnInit() {
  14. if (this.getError) {
  15. this.companies$ = this.companyDataService.getErrorCompanyConnections();
  16. } else {
  17. this.companies$ = this.companyDataService.getHealthyCompanyConnections();
  18. }
  19. this.companies$.subscribe((companies: CompanyConnection[]) => {
  20. this.dataSource.data = companies;
  21. this.changeDetectorRef.detectChanges();
  22. });
  23. }
  24. ngAfterViewInit() {
  25. this.dataSource.sort = this.sort;
  26. }
  27. openEditCompanyModal(company: CompanyConnection) {
  28. const dialogRef = this.dialog.open(CompanyModalComponent, {
  29. data: { company }
  30. });
  31. dialogRef.afterClosed().subscribe((editedCompany: CompanyConnection) => {
  32. if (editedCompany) {
  33. // 更新现有的公司连接
  34. this.companyDataService.editCompanyConnection(editedCompany).subscribe(
  35. () => {},
  36. error => {}
  37. );
  38. // 检索更新后的公司连接
  39. this.companyDataService.getCompanyConnection(editedCompany.dattoDomain).subscribe(
  40. (updatedCompany: CompanyConnection | undefined) => {
  41. if (updatedCompany) {
  42. console.log('更新后的公司连接:', updatedCompany);
  43. } else {
  44. console.log('未找到公司连接');
  45. }
  46. },
  47. error => {
  48. console.log('检索公司连接时出错:', error);
  49. }
  50. );
  51. }
  52. });
  53. }
  54. }

这个文件返回:更新后的公司连接:{dattoDomain: 'aptdynamics', connectWiseId: 'Bucks Communications', status: '200'}

这是来自 company-connection-service.service.ts 文件的一些方法。如果有其他能帮助的代码,请告诉我!

感谢!

英文:

I am using a mat-table so users can see a list of companyConnection objects for an application.

My issue occurs when a user clicks the edit button and updates a companyConnection using a modal, but the change does not reflect in the table.

For troubleshooting, I have printed the updated object to the console in multiple spots and have confirmed that the object is being updated, and it seems to just be a problem with the table not updating.

table.component.html

  1. &lt;table mat-table [dataSource]=&quot;dataSource&quot; matSort class=&quot;mat-elevation-z4&quot;&gt;
  2. &lt;!-- Columns --&gt;
  3. &lt;ng-container matColumnDef=&quot;DattoDomain&quot;&gt;
  4. &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Datto Domain &lt;/th&gt;
  5. &lt;td mat-cell *matCellDef=&quot;let company&quot;&gt; {{company.dattoDomain}} &lt;/td&gt;
  6. &lt;/ng-container&gt;
  7. &lt;ng-container matColumnDef=&quot;connectWiseId&quot;&gt;
  8. &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; ConnectWise Id &lt;/th&gt;
  9. &lt;td mat-cell *matCellDef=&quot;let company&quot;&gt; {{company.connectWiseId}} &lt;/td&gt;
  10. &lt;/ng-container&gt;
  11. &lt;ng-container matColumnDef=&quot;actions&quot;&gt;
  12. &lt;th mat-header-cell *matHeaderCellDef&gt;Actions&lt;/th&gt;
  13. &lt;td mat-cell *matCellDef=&quot;let company&quot;&gt;
  14. &lt;button mat-icon-button (click)=&quot;openEditCompanyModal(company)&quot;&gt;
  15. &lt;mat-icon&gt;edit&lt;/mat-icon&gt;
  16. &lt;/button&gt;
  17. &lt;/td&gt;
  18. &lt;/ng-container&gt;
  19. &lt;tr mat-header-row *matHeaderRowDef=&quot;displayedColumns&quot;&gt;&lt;/tr&gt;
  20. &lt;tr mat-row *matRowDef=&quot;let row; columns: displayedColumns;&quot;&gt;&lt;/tr&gt;
  21. &lt;/table&gt;
  1. export class CompanyTableComponent implements OnInit, AfterViewInit {
  2. @ViewChild(MatSort) sort: MatSort;
  3. @Input() companies: CompanyConnection[];
  4. @Input() getError: boolean;
  5. displayedColumns: string[] = [&#39;DattoDomain&#39;, &#39;connectWiseId&#39;, &#39;actions&#39;];
  6. companies$: Observable&lt;CompanyConnection[]&gt; = of([]);
  7. dataSource = new MatTableDataSource&lt;CompanyConnection&gt;();
  8. constructor(
  9. private companyDataService: CompanyDataService,
  10. private dialog: MatDialog,
  11. private changeDetectorRef: ChangeDetectorRef
  12. ) {}
  13. ngOnInit() {
  14. if (this.getError) {
  15. this.companies$ = this.companyDataService.getErrorCompanyConnections();
  16. } else {
  17. this.companies$ = this.companyDataService.getHealthyCompanyConnections();
  18. }
  19. this.companies$.subscribe((companies: CompanyConnection[]) =&gt; {
  20. this.dataSource.data = companies;
  21. this.changeDetectorRef.detectChanges();
  22. });
  23. }
  24. ngAfterViewInit() {
  25. this.dataSource.sort = this.sort;
  26. }
  27. openEditCompanyModal(company: CompanyConnection) {
  28. const dialogRef = this.dialog.open(CompanyModalComponent, {
  29. data: { company }
  30. });
  31. dialogRef.afterClosed().subscribe((editedCompany: CompanyConnection) =&gt; {
  32. if (editedCompany) {
  33. // Update the existing company connection
  34. this.companyDataService.editCompanyConnection(editedCompany).subscribe(
  35. () =&gt; {},
  36. error =&gt; {}
  37. );
  38. // Retrieve the updated company connection
  39. this.companyDataService.getCompanyConnection(editedCompany.dattoDomain).subscribe(
  40. (updatedCompany: CompanyConnection | undefined) =&gt; {
  41. if (updatedCompany) {
  42. console.log(&#39;Updated company connection:&#39;, updatedCompany);
  43. } else {
  44. console.log(&#39;Company connection not found&#39;);
  45. }
  46. },
  47. error =&gt; {
  48. console.log(&#39;Error retrieving company connection:&#39;, error);
  49. }
  50. );
  51. }
  52. });
  53. }
  54. }

this file returns: Updated company connection: {dattoDomain: &#39;aptdynamics&#39;, connectWiseId: &#39;Bucks Communications&#39;, status: &#39;200&#39;}

Here are methods from the company-connection-service.service.ts file

  1. export class CompanyDataService {
  2. private companies: CompanyConnection[] = [
  3. {
  4. dattoDomain: &quot;aptdynamics&quot;,
  5. connectWiseId: &quot;Apartment Dynamics&quot;,
  6. status: &quot;200&quot;
  7. },
  8. {
  9. dattoDomain: &quot;buckscomm&quot;,
  10. connectWiseId: &quot;Bucks Communications&quot;,
  11. status: &quot;200&quot;
  12. },
  13. {
  14. dattoDomain: &quot;cardinalconcretecompany&quot;,
  15. connectWiseId: &quot;Cardinal Concrete Company&quot;,
  16. status: &quot;200&quot;
  17. },
  18. {
  19. dattoDomain: &quot;centralcarolinaseeding&quot;,
  20. connectWiseId: &quot;Central Carolina Seeding&quot;,
  21. status: &quot;404&quot;
  22. },
  23. ];
  24. private companiesSubject = new BehaviorSubject&lt;CompanyConnection[]&gt;(this.companies);
  25. constructor() { }
  26. getCompanyConnections(): Observable&lt;CompanyConnection[]&gt; {
  27. return this.companiesSubject.asObservable();
  28. }
  29. getCompanyConnection(dattoDomain: string): Observable&lt;CompanyConnection | undefined&gt; {
  30. return this.getCompanyConnections().pipe(
  31. map((companies: CompanyConnection[]) =&gt; {
  32. return companies.find((company: CompanyConnection) =&gt; {
  33. return company.dattoDomain === dattoDomain;
  34. });
  35. })
  36. );
  37. }
  38. getHealthyCompanyConnections(): Observable&lt;CompanyConnection[]&gt; {
  39. return this.getCompanyConnections().pipe(
  40. map((companies: CompanyConnection[]) =&gt; {
  41. return companies.filter((company: CompanyConnection) =&gt; {
  42. return company.status === &quot;200&quot;;
  43. });
  44. })
  45. );
  46. }
  47. getErrorCompanyConnections(): Observable&lt;CompanyConnection[]&gt; {
  48. return this.getCompanyConnections().pipe(
  49. map((companies: CompanyConnection[]) =&gt; {
  50. return companies.filter((company: CompanyConnection) =&gt; {
  51. return company.status !== &quot;200&quot;;
  52. });
  53. })
  54. );
  55. }
  56. addCompanyConnection(company: CompanyConnection): Observable&lt;CompanyConnection[]&gt; {
  57. this.companies.push(company);
  58. this.companiesSubject.next(this.companies);
  59. return of(this.companies);
  60. }
  61. editCompanyConnection(updatedCompany: CompanyConnection): Observable&lt;CompanyConnection[]&gt; {
  62. const index = this.companies.findIndex(c =&gt; c.dattoDomain === updatedCompany.dattoDomain);
  63. if (index !== -1) {
  64. this.companies[index] = updatedCompany;
  65. }
  66. return of(this.companies);
  67. }
  68. }

if there is any other code I can provide that would help, please let me know!

Thanks!

答案1

得分: 0

在更新后,在主题上调用next

  1. editCompanyConnection(updatedCompany: CompanyConnection): Observable<CompanyConnection[]> {
  2. const index = this.companies.findIndex(c => c.dattoDomain === updatedCompany.dattoDomain);
  3. if (index !== -1) {
  4. this.companies[index] = updatedCompany;
  5. this.companiesSubject.next(this.companies); //添加这行
  6. }
  7. return of(this.companies);
  8. }
英文:

Call next on the subject after updating.

  1. editCompanyConnection(updatedCompany: CompanyConnection): Observable&lt;CompanyConnection[]&gt; {
  2. const index = this.companies.findIndex(c =&gt; c.dattoDomain === updatedCompany.dattoDomain);
  3. if (index !== -1) {
  4. this.companies[index] = updatedCompany;
  5. this.companiesSubject.next(this.companies); //add this line
  6. }
  7. return of(this.companies);
  8. }

huangapple
  • 本文由 发表于 2023年6月2日 10:15:50
  • 转载请务必保留本文链接:https://go.coder-hub.com/76386745.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定