angular - Angular：更新后更新 Mat-Table 内容

Question

我有带有可扩展行的 Mat-table，其中在可扩展行中为每一行提供了更新功能。POST&请求工作正常，GET但更新后我需要重新加载我的页面以查看刷新的数据。我renderRows()在运行 UPDATE 查询后使用了 mat-table 方法，但仍然无法正常工作。这是我的代码：

abc.service.ts

createExamCategory(options) {
    return this.http.post<{ message: string }>(this.url + '/createExamCategory', options);
}

getExamCategory():Observable<any> {
    return this.http.get<any>(this.url + '/getAllExamCategory');
}

abc.component.html

<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
      <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay; index as i">
        <th mat-header-cell *matHeaderCellDef>
          {{column=='id'?'Id':column=='examCategoryName'?'Category':column=='isActive'?'Status':''}}
        </th>
        <td mat-cell *matCellDef="let element"> 
          <label [class.table-data]="column=='isActive'">{{element[column]}}</label>
          <label *ngIf="column=='isActive' && element[column]">Active</label>
          <label *ngIf="column=='isActive' && !element[column]">Inactive</label>
          <button mat-icon-button color="primary" *ngIf="column=='Action'" (click)="expandedElement = expandedElement === element ? null : element">
            <mat-icon fontSet="material-icons-outlined" (click)="onClick(element)">edit</mat-icon>
          </button>
        </td>
      </ng-container>
      <ng-container matColumnDef="expandedDetail">
        <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
          <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
            <div class="example-element-description">
              <form [formGroup]="updateExamCategory" (ngSubmit)="updateExamCategoryForm()">
                <mat-form-field class="example-full-width create-fields">
                  <mat-label>Category</mat-label>
                  <input matInput formControlName="examCategoryName">
                </mat-form-field>
                <mat-slide-toggle formControlName="isActive">{{Status.value==true?'Active':'Inactive'}}</mat-slide-toggle>
                <button type="submit" mat-flat-button color="primary" style="display: inline;margin-left: 50px;">Update</button>
              </form>
            </div>
          </div>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
      <tr mat-row *matRowDef="let element; columns: columnsToDisplay;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"></tr>
      <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
    </table>
    <mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>

abc.component.ts

onClick(e) {
    this.updateExamCategory.controls['id'].setValue(e.id);
    this.updateExamCategory.controls['examCategoryName'].setValue(e.examCategoryName);
    this.updateExamCategory.controls['isActive'].setValue(e.isActive);
    this.change[0] = this.updateExamCategory.get('examCategoryName').value;
    this.change[1] = this.updateExamCategory.get('isActive').value;
}

get Status() {
    return this.updateExamCategory.get('isActive');
}

get examCatergory() {
    return this.updateExamCategory.get('examCategoryName');
}

updateExamCategoryForm() {
    if(this.change[0] == this.examCatergory.value && this.change[1] == this.Status.value) {
      return alert('Same Value cannot be updated');
    }
    this.adminCategory.createExamCategory(this.updateExamCategory.value).subscribe(reponse => {
      return console.log(reponse.message);
    });
}

getTableData() {
    this.columnsToDisplay = ['id', 'examCategoryName', 'isActive', 'Action'];
    this.adminCategory.getExamCategory().subscribe((reponse: any) => {
      this.ExamCategoryData = reponse.examCategoryList;
      this.dataSource = new MatTableDataSource(this.ExamCategoryData);
      this.dataSource.paginator = this.paginator;
    }, error => {
        console.log(error);
    });
}

ngOnInit() {
    this.getTableData();
}

这是我的代码。需要添加什么来实现这一点？

标签： angulartypescripthttpangular-materialangular9

Answer 1

这应该有效：

updateExamCategoryForm() {
  if (this.change[0] == this.examCatergory.value && this.change[1] == this.Status.value) {
    return alert('Same Value cannot be updated');
  }
  this.adminCategory.createExamCategory(this.updateExamCategory.value)
  .subscribe(reponse => {

    // Here you can choose to reload the data from the service or
    // add it to your current list and reinitialize your dataSource

    // Here if the response has the same response of the GET call
    this.ExamCategoryData = reponse.examCategoryList;
    this.dataSource = new MatTableDataSource(this.ExamCategoryData);
    this.dataSource.paginator = this.paginator;
    return console.log(reponse.message);
  });
}