javascript 为什么数据源更改时Angular Material表不更新?

x33g5p2x  于 2023-06-04  发布在  Java
关注(0)|答案(1)|浏览(315)

我使用了一个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);
  }
}

如果有任何其他代码,我可以提供,这将有助于,请让我知道!
谢谢!

kr98yfug

kr98yfug1#

更新后调用next

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);    //add this line
    }
  
    return of(this.companies);
  }

相关问题