Как пропустить цикл для последней строки matRowDef = "let row; columns: displayColumns;" - PullRequest
Новая
       10

Как пропустить цикл для последней строки matRowDef = "let row; columns: displayColumns;"

0 голосов
/ 15 января 2019

Я занимаюсь разработкой приложения angular-crud с использованием AngularMaterial.

Я хочу пропустить выполнение последней строки для * matRowDef = "let row; columns: displayColumns;" в приведенном ниже коде, поскольку эта строка содержит действия (редактировать / удалять). 

<div class="example-container mat-elevation-z8">
  <div class="example-loading-shade"
       *ngIf="isLoadingResults">
    <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
  </div>
  <div class="button-row">
    <a mat-flat-button color="primary" [routerLink]="['/user-add']"><mat-icon>add</mat-icon></a>
  </div>
  <div class="mat-elevation-z8">
    <table mat-table [dataSource]="data" class="example-table"
           matSort matSortActive="first_name" matSortDisableClear matSortDirection="asc">

      <!-- User Name Column -->
      <ng-container matColumnDef="userId">
        <th mat-header-cell *matHeaderCellDef>ID</th>
        <td mat-cell *matCellDef="let row">{{row.userId}}</td>
      </ng-container>

      <!-- User Name Column -->
      <ng-container matColumnDef="firstName">
        <th mat-header-cell *matHeaderCellDef>First Name</th>
        <td mat-cell *matCellDef="let row">{{row.firstName}}</td>
      </ng-container>

      <ng-container matColumnDef="middleName">
          <th mat-header-cell *matHeaderCellDef>Middle Name</th>
          <td mat-cell *matCellDef="let row">{{row.middleName}}</td>
        </ng-container>

      <ng-container matColumnDef="lastName">
        <th mat-header-cell *matHeaderCellDef>Last Name</th>
        <td mat-cell *matCellDef="let row">{{row.lastName}}</td>
      </ng-container>

      <ng-container matColumnDef="mobileNo">
        <th mat-header-cell *matHeaderCellDef>Phone Number</th>
        <td mat-cell *matCellDef="let row">{{row.mobileNo}}</td>
      </ng-container>

      <ng-container matColumnDef="email">
        <th mat-header-cell *matHeaderCellDef>E-Mail</th>
        <td mat-cell *matCellDef="let row">{{row.email}}</td>
      </ng-container>

      <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>Actions</th>
          <td mat-cell *matCellDef="let row"><mat-card-actions>
              <a mat-flat-button color="primary" [routerLink]="['/user-edit', row.userId]"><mat-icon>edit</mat-icon></a>
              <a mat-flat-button color="warn" (click)="deleteUser(row.userId)"><mat-icon>delete</mat-icon></a>
            </mat-card-actions></td>
        </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/user-details/', row.userId]"></tr>
    </table>
  </div>
</div>

маршрутизация "/ user-details" не должна быть установлена ​​для ng-container "actions" . Сейчас для действий устанавливается значение маршрутизации "/ user-details", и функция щелчка в значок удаления не работает.

Я пытался отделить действия от displayColumns, но кнопки редактирования / удаления должны присутствовать во всех строках. так что этот подход не работает.

Пожалуйста, помогите, что нужно сделать, чтобы это исправить.

=============================================== =================

Обновленный запрос:

Я заметил одну странную вещь и не знаю, ожидаемое это поведение или нет. 

deleteUser(id) {
    this.isLoadingResults = true;
    this.api.deleteUser(id)
      .subscribe(res => {
          this.isLoadingResults = false;
          this.router.navigate(['/users']);
        }, (err) => {
          console.log(err);
          this.isLoadingResults = false;
        }
      );
  }

Я пробовал два случая для ссылки ниже. 

<a mat-flat-button color="warn" (click)="deleteUser(row.userId)"><mat-icon>delete</mat-icon></a>

вариант 1: с routerLink в mat-row 

<tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/user-details/', row.userId]"></tr>

При выборе функции кнопки удаления deleteUser срабатывает, запись успешно удаляется из БД и страница обновляется (перемещается в / users ..... this.router.navigate (['/ users']);).

вариант 2: без роутераLink в mat-row 

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

При выборе функции кнопки удаления deleteUser сработало, запись успешно удалена из БД, но страница не обновилась, а удаленная запись все еще отображается.

deleteUser функция одинакова в обоих случаях, но this.router.navigate(['/users']) не была выполнена в случае 2. Мне интересно, почему ??

...