обновить таблицу после получения данных - PullRequest
Новая
       15

обновить таблицу после получения данных

0 голосов
/ 30 сентября 2019

У меня есть функция редактирования для моей таблицы пользователей. Когда я редактирую своего пользователя с помощью моего диалогового компонента (редактировать компонент), у меня хорошая связь между ними (консольный журнал с новым значением), но моя таблица не обновляется и всегда отображает старое значение.

Iя не могу сделать демонстрацию с помощью stackblitz, потому что у моего приложения есть много вещей, которые нужно импортировать для работы.

это часть моего кода:

Html 

 <mat-dialog-content [formGroup]="form">
    <mat-form-field class="full-width-input">
      <input id="firstName" matInput placeholder="First name" formControlName="f_name">
    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="middleName" matInput placeholder="Middle name" formControlName="m_name">

    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="lastName" matInput placeholder="Last name" formControlName="l_name">

    </mat-form-field>
    <mat-form-field class="full-width-input">
      <input id="email" matInput placeholder="Email" formControlName="email">
    </mat-form-field>
  </mat-dialog-content>
  <mat-dialog-actions>
    <button class="mat-raised-button" (click)="close()">Close</button>
    <button class="mat-raised-button mat-primary" (click)="save()">Save</button>
  </mat-dialog-actions>
</div>

mainкомпонент для открытого диалога (я думаю, что-то здесь не хватает) 

  openEditDialog(user) {
    const dialogConfig = new MatDialogConfig();

    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
    dialogConfig.data = [ this.dataSource.data, user];

    const dialogRef = this.dialog.open(EditUserDialogComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(
      val => {
             console.log(val) // new good value here 
                             // I think it miss something here
      })
  }

edit component 

  save() {
    if (this.form.valid) {
      this.formSubmitAttempt = true;
      this.dialogRef.close(this.form.value);  // send updated value to main component
    }
  }

Мне нужно обновить dataSource.data, который содержит массив объектов (пользователей). После этого я думаю обновить его:

this.dataSource.data = [... this.dataSource.data];

Вот HTML-код таблицы 

  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="dataSource" matSort multiTemplateDataRows >

      <!-- First name Column -->
      <ng-container matColumnDef="f_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> First name </th>
        <td mat-cell *matCellDef="let element"> {{element.f_name}} </td>
        <label>
          <input class="table-input" *ngIf="selectedUser" type="text">
        </label>
      </ng-container>

      <!-- Middle name Column -->
      <ng-container matColumnDef="m_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Middle name </th>
        <td mat-cell class="status" *matCellDef="let element">{{element.m_name}}</td>
      </ng-container>

      <!-- Last name Column -->
      <ng-container matColumnDef="l_name">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Last name </th>
        <td mat-cell *matCellDef="let element"> {{element.l_name}} </td>
      </ng-container>

      <!-- Email Column -->
      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
        <td mat-cell *matCellDef="let element"> {{element.email}} </td>
      </ng-container>

      <!-- Role Column -->
      <ng-container matColumnDef="role">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Role </th>
        <td mat-cell *matCellDef="let element"> {{element.role}} </td>
      </ng-container>


      <!-- Actions Column -->
      <ng-container matColumnDef="action">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
        <td mat-cell *matCellDef="let row">
          <button mat-raised-button color="primary" class="editUserBtn" (click)="openEditDialog(row)"><mat-icon class="edit-icon" >launch</mat-icon><span>Edit</span></button>
          <button mat-raised-button color="warn" class="deleteUserBtn" (click)="onDelete(row)"><mat-icon class="delete-icon" >delete_outline</mat-icon><span>Delete</span></button>
        </td>
      </ng-container>

</div>
...