Таблица угловых материалов: как передать / отправить выбранные строки, которые в конечном итоге будут отправлены на сервер после отправки кнопки? - PullRequest
Новая
       3

Таблица угловых материалов: как передать / отправить выбранные строки, которые в конечном итоге будут отправлены на сервер после отправки кнопки?

1 голос
/ 18 октября 2019

Есть похожий вопрос Как передать значение выбранной строки таблицы в событие нажатия кнопки - Дизайн материала - Угловой 6 , однако я не нахожу там полезных решений для моего случая.

Я использую таблицу угловых материалов для отображения своих данных, у меня есть флажок рядом с каждой строкой данных.

Я пытаюсь добиться того, чтобы пользователь мог выбирать нужные строки ипосле отправки кнопки все выбранные строки будут переданы бэкэнду для обработки. Прямо сейчас мой подход состоит в том, что когда флажок установлен, он вызовет функцию (click)="onSelectCheckbox(row)" в моем component.ts и добавит эту строку в массив, когда пользователь отменит выбор строки, он вызовет ту же функцию и удалит объект строки с помощью .filter().

Это работает нормально, если я нажимаю флажок в относительно нормальном темпе, однако логика начинает портиться, когда я несколько раз нажимаю разные флажки в более быстром темпе. При отправке кнопки моя консоль показывает, что невыбранные строки все еще находятся в массиве, а отмеченные строки не находятся в массиве.

Этот флажок установлен в моем mat-table: 

<ng-container matColumnDef="select">
          <th mat-header-cell *matHeaderCellDef>
            <mat-checkbox (change)="$event ? masterToggle() : null" [checked]="selection.hasValue() && isAllSelected()"
              [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
            </mat-checkbox>
          </th>
          <td mat-cell *matCellDef="let row">
            <mat-checkbox (click)="onSelectCheckbox(row)" (change)="$event ? selection.toggle(row) : null"
              [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
            </mat-checkbox>
          </td>
</ng-container>
.
.
.
<button class="btn btn-primary" (click)="openSubmitConfirmation()">Submit</button>

и onSelectCheckbox(row) логика в моем component.ts, а также моя кнопка для проверки и отображения выбранных строк в моей консоли: 

selectedPayment = new Array<Payment>();

onSelectCheckbox(row: Payment) {
    if (this.selectedPayment === undefined || this.selectedPayment.length === 0) {
      this.selectedPayment.push(row);
    } else if (this.selectedPayment.includes(row)) {
      this.selectedPayment = this.selectedPayment.filter(
        x => x.payment_reference !== row.payment_reference);
    } else {
      this.selectedPayment.push(row);
    }
  }

openSubmitConfirmation() {
    console.log(this.selectedPayment);
  }

Я уверен, что есть лучший и более умный способсделать это, но я не смог найти никаких полезных ресурсов для этого, любое руководство будет оценено.

1 Ответ

2 голосов
/ 18 октября 2019

, чтобы получить все выделенные элементы одновременно, вы можете использовать SelectionModel

SelectionModel из @ angular / cdk / collection

Здесь я создал stackblitz, отметьте это https://stackblitz.com/edit/angular-jlk4vf-spkxv2

...