Question

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

我想在下面的代码中跳过 * 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>

不应为 ng容器的“操作” 设置

路由“ /用户详细信息”。目前，正在为操作设置路由值“ / 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

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

触发选择删除按钮功能deleteUser时，已成功从db中删除条目，并且刷新了页面（导航到/ users ..... this.router.navigate（['/ users']）；）。

情况2：在行中没有routerLink

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

在触发选择删除按钮功能deleteUser时，已成功从db中删除了条目，但是页面没有刷新，并且删除的条目仍在显示。

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

如何跳过matRowDef =“ let row; columns：displayColumns;”的最后一行的循环

0 个答案: