删除角材料数据表(角7)上的环形行上的选定行

问题描述 投票:0回答:1

我有一个使用Angular Material构建的动态数据表,在这里我正在使用API​​向表提供数据。

我想做的是添加删除功能,可以选择一行并删除整行。

我想使用mat-checkbox选择该行,并使用标题中的删除按钮删除所选的行。

现在,该复选框将添加到该行中的每个单元格项目上,我希望在其中选择整行。

如何/如何添加或修复此功能?

HTML组件

 <mat-card *ngIf="!loading">
<span>
    <mat-card-header class="mat-card-header view-title" style="background-color: lightblue;
    padding: 11px 0px 0px 0px;
    margin: 0px 0px 8px 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 15px 0 rgba(0, 0, 0, 0.19)">
    <mat-card-title>{{viewName}}</mat-card-title>
    <span class="fill-nav-bar"></span>
      <button style="padding-right: 80px;" mat-icon-button>
        <mat-icon>cancel</mat-icon>
      </button>
      </mat-card-header>
</span>

  <mat-card-content>
    <div class="view-container mat-elevation-z8">
      <table mat-table [dataSource]="dataSource" matSort>

        <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>
            {{ column }}
            <mat-icon aria-hidden="false" aria-label="filter icon">more_horiz</mat-icon>
          </th>
          <td mat-cell *matCellDef="let action">{{ action[column] }}
           <mat-checkbox></mat-checkbox>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>

      <mat-paginator [pageSizeOptions]="pageSizeOptions" showFirstLastButtons></mat-paginator>
    </div>
  </mat-card-content>
</mat-card>

TS组件

@Component({
  templateUrl: 'view.component.html',
  encapsulation: ViewEncapsulation.None
})
export class ViewComponent implements OnInit, OnDestroy {

  // User Fields
  currentUser: User;
  users: User[] = [];
  currentUserSubscription: Subscription;

  loading : boolean;
  // Action Fields
  viewData: any;
  viewName: string;
  refNumber: number;
  currentActionSubscription: Subscription;
  displayedColumns: string[] = [];
  dataSource: any = new MatTableDataSource([]);
  pageSizeOptions: number[] = [10, 20, 50];

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  defaultSort: MatSortable = {
    id: 'defColumnName',
    start: 'asc',
    disableClear: true
  };

  defaultPaginator: MatPaginator;

  constructor(
    private iconRegistry: MatIconRegistry,
    private sanitizer: DomSanitizer,
    private actionService: ActionService
  ) {
    this.loading = false;
    this.iconRegistry.addSvgIcon(
      'thumbs-up',
      this.sanitizer.bypassSecurityTrustResourceUrl(
        'assets/img/examples/thumbup-icon.svg'
      )
    );
  }

  loadAction(action: any) {

    this.loading = true;
    // If there is already data loaded into the View, cache it in the service.
    if (this.viewData) {
      this.cacheAction();
    }

    if (this.sort) {
      // If there is sorting cached, load it into the View.
      if (action.sortable) {
        // If the action was cached, we should hit this block.
        this.sort.sort(action.sortable);
      } else {
        // Else apply the defaultSort.
        this.sort.sort(this.defaultSort);
      }
    }

    if (this.paginator) {
      // If we've stored a pageIndex and/or pageSize, retrieve accordingly.
      if (action.pageIndex) {
        this.paginator.pageIndex = action.pageIndex;
      } else { // Apply default pageIndex.
        this.paginator.pageIndex = 0;
      }

      if (action.pageSize) {
        this.paginator.pageSize = action.pageSize;
      } else { // Apply default pageSize.
        this.paginator.pageSize = 10;
      }
    }

    // Apply the sort & paginator to the View data.
    setTimeout(() => this.dataSource.sort = this.sort, 4000);
    setTimeout(() => this.dataSource.paginator = this.paginator, 4000);

    // Load the new action's data into the View:
    this.viewData = action.action;
    this.viewName = action.action.ActionName;
    this.refNumber = action.refNumber;

    // TODO: add uniquifiers/ids and use these as the sort for table

    const displayedColumns = this.viewData.Columns.map((c: { Name: any; }) => c.Name);
    displayedColumns[2] = 'Folder1';
    this.displayedColumns = displayedColumns;
    // tslint:disable-next-line: max-line-length
    const fetchedData = this.viewData.DataRows.map((r: { slice: (arg0: number, arg1: number) => { forEach: (arg0: (d: any, i: string | number) => any) => void; }; }) => {
      const row = {};
      r.slice(0, 9).forEach((d: any, i: string | number) => (row[this.displayedColumns[i]] = d));
      return row;
    });

    this.dataSource = new MatTableDataSource(fetchedData);
    this.loading = false;
  }


  // Stores the current Action, sort, and paginator in an ActionState object to be held in the action service's stateMap.
  cacheAction() {
    let actionState = new ActionState(this.viewData);

    // Determine the sort direction to store.
    let cachedStart: SortDirection;
    if (this.sort.direction == "desc") {
      cachedStart = 'desc';
    } else {
      cachedStart = 'asc';
    }

    // Create a Sortable so that we can re-apply this sort.
    actionState.sortable = {
      id: this.sort.active,
      start: cachedStart,
      disableClear: this.sort.disableClear
    }

    // Store the current pageIndex and pageSize.
    actionState.pageIndex = this.paginator.pageIndex;
    actionState.pageSize = this.paginator.pageSize;

    // Store the refNumber in the actionState for later retrieval.
    actionState.refNumber = this.refNumber;
    this.actionService.cacheAction(actionState);
  }

  ngOnInit() {
    // Subscribes to the action service's currentAction, populating this component with View data.
    this.actionService.currentAction.subscribe(action => this.loadAction(action));
  }
angular typescript angular-material angular7 angular8
1个回答
0
投票

您可以添加按钮而不是复选框,然后在该按钮中传递该行的对象。

(click)="delete(obj)"

现在在您的打字稿文件中,您将创建一个函数,在此函数中,您只想要不属于您的对象。喜欢:

delete (columm) {
  this.array = this.array.filter(val => {
    return val.id != columm.id 
    // this will maintain all objects that are not the one you received. 
  })
}

// If you use checkbox and press delete at the end. You can select multiple rows to delete so you need to pass an array. First you need to have &events that fire onde the row is selected, and push the values into an array. Or when you press delete, it pushes it to an array before filtering.

async delete () {
  await this.array.forEach( element => {
    if(element.check){
      this.deletedArray.push(element);
    }
  })
  
    this.array = this.array.filter(val => {
      for(var i = 0;i<this.deletedArray.length;i++){
        return val.id != this.deletedArray[i].id
      }    
  })
  
}

希望我能帮上忙。我没有看您的变量和属性,您需要放入数组和var。那只是切换到您的。我只发布我认为与您的问题有关的方式

© www.soinside.com 2019 - 2024. All rights reserved.