マットテーブル材質設計からマット列を削除する方法

Question

現在、角度材質のマットテーブルを使用しています。マットテーブルからデータのレコードを削除することを助けてください。ここで

はコードです：

  <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を含め、それを呼び出す子コンポーネントを持つメンバーセクションのメインコンポーネント上にあります。それは上のサービスがうまくいくために必要なものと一緒に、テーブルからparamsを渡します。私は、それが重要な場合にテーブルコードの削除行がどのように動作するかを理解するためにそれを含めました。

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, 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}); 
    }