如何从 mat-table 材料设计中删除 mat-row

Question

目前正在使用角度材料设计垫表。请帮我从 mat-table 中删除一条数据记录。

代码如下：

            <mat-table #table [dataSource]="dataSource" matSort slimScroll width="auto" height="450px" color="rgba(0,0,0,0.3)" size="3px">
                    <!-- modelName Column -->
                    <ng-container matColumnDef="modelname">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Name </mat-header-cell>
                    <mat-cell *matCellDef="let element" data-toggle="modal" data-target="#deviceView"> <span>{{element.modelname}}</span> </mat-cell>
                    </ng-container>

                    <!-- modelNumber Column -->
                    <ng-container matColumnDef="modelnumber">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Number </mat-header-cell>
                    <mat-cell *matCellDef="let element" data-toggle="modal" data-target="#deviceView"> <span>{{element.modelnumber}}</span> </mat-cell>
                    </ng-container>

                    <!-- manufacturer Column -->
                    <ng-container matColumnDef="manufacturer">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Manufac </mat-header-cell>
                    <mat-cell *matCellDef="let element" data-toggle="modal" data-target="#deviceView"> <span>{{element.manufacturer}}</span> </mat-cell>
                    </ng-container>

                    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
                    <mat-row *matRowDef="let row; columns: displayedColumns; let i = index;" id="{{row.uuid}}" (click)="displayData(row.uuid); deleterow(index)"></mat-row>
                </mat-table>

                <div class="table-page">
                    <mat-paginator [length]="length" [pageSize]="1000" (page)="pageEvent = $event; onPaginateChange($event)">
                    </mat-paginator>
                    <div *ngIf="!pageEvent" class="pageformat text-primary">
                        {{pageSize}} / {{length}}
                    </div>


                    <div *ngIf="pageEvent" class="pageformat text-primary">
                        <div *ngIf="pageEvent.length >= pageEvent.pageSize * pageEvent.pageIndex + pageEvent.pageSize">{{pageEvent.pageSize * pageEvent.pageIndex + pageEvent.pageSize}} / {{pageEvent.length}}</div>
                         <div *ngIf="pageEvent.length <= pageEvent.pageSize * pageEvent.pageIndex + pageEvent.pageSize">{{pageEvent.length}} / {{pageEvent.length}}</div>
                    </div>
                </div>

            </div>

请检查并告诉我任何建议。

Answer 1

这是从某个地方调用的，比如一个按钮。它存在于具有调用它的子组件的成员部分的主组件上，包括该组件的 html。它传递表中的参数以及它上面的服务工作所需的任何其他内容。我将其包含在内，以便您了解表代码中的删除行如何在重要的情况下工作。

members.component.ts

  // --- DELETE ---

  public deleteMember(itemId) {
    return this.mainComponentService.deleteItem(
      this.dbTable,
      itemId,
      this.name1,
      this.name2,
      this.tableItemId,
      this.paginator,
      this.dataSource
    );
  }

从点击事件调用的html。

members.component.html

<ng-container matColumnDef="options">
          <mat-header-cell *matHeaderCellDef> Options </mat-header-cell>
          <mat-cell *matCellDef="let row">
            <button (click)="viewProfile(row.member_id)">View</button>
            <button (click)="deleteMember(row.member_id)">Delete</button>
            <button (click)="editMember(row.member_id)">Edit</button>
          </mat-cell>
        </ng-container>

现在删除肉。这存在于更高级别的组件上，高于成员、项目等部分，并由应用程序的这些部分中的顶级组件使用。节省了大量的复制和粘贴！

请注意主要操作下方的 deleteRowDataTable 函数。这会从数据表中删除该行，以便用户在执行操作后看到它已被删除。诀窍是从数据库中删除它并从 dataSource 对象中删除数据。这样用户就不必从数据库中刷新数据源了。

main-component.service.ts

// --- DELETE ---

  public deleteItem(dbTable, itemId, name1, name2, tableItemId, paginator, dataSource) {
    // Get name from record to be deleted to warn in dialog.
    this.dsData = dataSource.data;
    const record = this.dsData.find(obj => obj[tableItemId] === itemId);
    const name = 'Delete ' + record[name1] + ' ' + record[name2] + '?';
// Call the confirm dialog component
this.confirmService.confirm(name, 'This action is final. Gone forever!')
  .switchMap(res => {if (res === true) {
    return this.appService.deleteItem(dbTable, itemId);
  }})
  .subscribe(
    result => {
      this.success();
      // Refresh DataTable to remove row.
      this.deleteRowDataTable (itemId, tableItemId, paginator, dataSource);
    },
    (err: HttpErrorResponse) => {
      console.log(err.error);
      console.log(err.message);
      this.messagesService.openDialog('Error', 'Delete did not happen.');
    }
  );
  }

  // Remove the deleted row from the data table. Need to remove from the downloaded data first.

  private deleteRowDataTable (itemId, tableItemId, paginator, dataSource) {
    this.dsData = dataSource.data;
    const itemIndex = this.dsData.findIndex(obj => obj[tableItemId] === itemId);
    dataSource.data.splice(itemIndex, 1);
    dataSource.paginator = paginator;
  }

此服务很瘦，与 app.module 等一起位于堆栈的顶部。不是您问题的一部分，但可能对某人的完整答案有用。

app.service.ts

// ---- DELETES a single record. ----

  public deleteItem(dbTable: string, itemId: number):  Observable<any> {
    return this.http
      .delete(`${this.baseUrl}${dbTable}?ids=${itemId}`, {headers: this.headers});
  }