Удалить выбранные строки в строках с петлями в Angular Таблица данных материала (Angular 7)

Question

У меня есть динамическая c сборка таблицы данных с использованием Angular Материал, в котором я использую 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));
  }

Answer 1

Вы можете добавить кнопку вместо флажка, и в этой кнопке вы передаете объект этой строки.

(click)="delete(obj)"

Теперь в вашем файле машинописного текста вы создаете функцию, в которой вам нужны только объекты, которые не тот, который вы получили. Нравится:

delete (column) {
  this.array = this.array.filter(val => {
    return val.id != column.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. Это только переключение на ваше. Я размещаю сообщения только так, как я думаю, чтобы решить вашу проблему