angular - 如何跳过 matRowDef 的最后一行的循环 =“让行；列：显示列；”

Question

我正在使用 AngularMaterial 开发一个 Angular crud 应用程序。

我想跳过*matRowDef="let row; columns: displayedColumns;"的最后一行的执行 在下面的代码中，因为该行包含操作（编辑/删除）。

<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>

不应为ng-container "actions" 设置路由 "/user-details"。现在正在为操作设置路由值“/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：在 mat-row 中使用 routerLink

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

在选择删除按钮功能deleteUser时，已成功从数据库中删除条目并刷新页面（导航到 /users .....this.router.navigate(['/users']);）。

案例 2：在 mat-row 中没有 routerLink

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

在选择删除按钮功能deleteUser时，已成功从数据库中删除条目，但页面未刷新，已删除条目仍在显示。

deleteUser两种情况下的功能相同，但this.router.navigate(['/users'])在情况 2 中未执行。我想知道为什么？

标签： angularangular-material-6