angular - Angular Material Table 不会更新或呈现新行，即使它正在接收可观察的数据

Question

我正在使用 Angular 的 Material Design Table 来动态呈现来自 API 的数据。该表能够呈现 OnInit，但是，任何更改 POST / DELETE 请求都不会在不刷新页面的情况下重新呈现表。除非我弄错了，否则我相信当从 observable 发出事件时，The Table 会自动呈现表格。关于 mat table 的一些评论是我之前通过谷歌搜索尝试过的。

编辑：在 alp 服务中添加了 createKiosk 功能

kiosk.service.ts

getKiosk(): Observable<Kiosk[]> {
   return this.http.get<Kiosk[]>(environment.baseUrl);
}



// adds an entry to the database
  createKiosk(kiosk: Kiosk): Observable<Kiosk> {
    return this.http.post<Kiosk>(environment.baseUrl, kiosk, httpOptions);
  }

kiosk.model.ts

export interface Kiosk {
   location_id: string;
   start_x: number;
   start_y: number;
}

kiosk.component.html

<!-- Kiosk Table Generation -->
<div class="container" style="padding-top: 1%;">

  <table mat-table [dataSource]="dataSource" class="mat-elevation-z6">
    <!-- Location Column -->
    <ng-container matColumnDef="location_id">
      <th mat-header-cell *matHeaderCellDef>Location</th>
      <td mat-cell *matCellDef="let kiosk">{{ kiosk.location_id }}</td>
    </ng-container>

    <!-- X Coordinate Column -->
    <ng-container matColumnDef="start_x">
      <th mat-header-cell *matHeaderCellDef>X Coordinate</th>
      <td mat-cell *matCellDef="let kiosk">{{ kiosk.start_x }}</td>
    </ng-container>

    <!-- Y coordinate Column -->
    <ng-container matColumnDef="start_y">
      <th mat-header-cell *matHeaderCellDef>Y Coordinate</th>
      <td mat-cell *matCellDef="let kiosk">{{ kiosk.start_y }}</td>
    </ng-container>

    <!-- Actions -->
    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row">
        <button mat-icon-button><mat-icon>launch</mat-icon></button>
        <button
         mat-icon-button
         color="warn"
         (click)="deleteKiosk(row)">
          <mat-icon>delete_outline</mat-icon>
        </button>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</div>

kiosk.component.ts

  kiosks: Kiosk[];

  // Properties for table use
  dataSource = new KioskDataSource(this.kioskService);
  displayedColumns: string[] = ['location_id', 'start_x', 'start_y', 'actions'];
  // @ViewChild(MatTable, {static: false}) table: MatTable<any>;

  constructor(
    private kioskService: KioskService,
    public dialog: MatDialog
    ) { }

  // inits on module load
  ngOnInit() {
    this.getKiosk();
  }

  // getKiosk gets all kiosks from api
  getKiosk() {
    this.kioskService.getKiosk().subscribe(kiosks => {
      this.kiosks = kiosks;
      console.log(this.kiosks);
    });
  }

  addKiosk(kioskForm: Kiosk) {
    this.kioskService.createKiosk(kioskForm).subscribe(kiosk => this.kiosks.push(kiosk));
    this.getKiosk();
  }

  // Opens popup modal of another component in order from data to be passed from that to use in the service here.
  onCreate() {
    const dialogRef = this.dialog.open(KioskFormComponent, {
      disableClose: true,
      autoFocus: true,
      width: '60%',
      data: {
      }
    });

    // After the modal is closed data is submitted via addKiosk();
    dialogRef.afterClosed().subscribe(response => {
      // this.location_id = response;
      console.log(response);
      if (response === undefined) {
        alert('no data added');
      } else {
        this.addKiosk(response);
      }
      console.log('The dialog has been submitted');
    });
  }

  deleteKiosk(kiosk: Kiosk): void {
    // this.kioskService.deleteKiosk(kiosk).subscribe();
    this.kiosks = this.kiosks.filter(res => res !== kiosk);
    this.kioskService.deleteKiosk(kiosk.location_id).subscribe();
  }

}

export class KioskDataSource extends DataSource<Kiosk> {

  constructor(private kioskService: KioskService) {
    super();
  }

  connect(): Observable<Kiosk[]> {
    return this.kioskService.getKiosk();
  }

  disconnect() {

  }
}```

标签： angularangular-materialangular-material-table