Question

目前我正在使用角料设计mat-table。请帮我从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对象中删除数据。这样，用户就不必从db中刷新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});
  }

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

1 个答案: