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

发布时间：2020-12-17 17:03:48 所属栏目：安全来源：网络整理

导读：目前我正在使用角料设计垫桌.请帮我从mat-table中删除数据记录. 这是代码： mat-table #table [dataSource]="dataSource" matSort slimScroll width="auto" height="450px" color="rgba(0,0.3)" size="3px" !-- modelName Column -- ng-container matColumnD

目前我正在使用角料设计垫桌.请帮我从mat-table中删除数据记录.

这是代码：

<mat-table #table [dataSource]="dataSource" matSort slimScroll width="auto" height="450px" color="rgba(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>

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

解决方法

这是从某个按钮调用的.它位于具有调用它的子组件的成员部分的主要组件上,包括此组件的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.

主component.service.ts

// --- DELETE ---

  public deleteItem(dbTable,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,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,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});
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!