Значение строки флажка таблицы угловых материалов при проверке

Question

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

Answer 1

Вам необходимо добавить еще один атрибут в PeriodicElement.

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
  selectedName: string;
}

После этого вы создаете функцию для управления выбором:

toggleCheckbox(row) {
  this.selection.toggle(row);
  row.selected = !row.selected;
}

Вот ваш измененный код:

https://stackblitz.com/angular/lrpjroljdly?embed=1&file=app/table-selection-example.html

Answer 2

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

public tables = [{
id: 1,
username: 'xxxxx',
password: 'xxxxxx',
checked: false
}, {
id: 2,
username: 'xxxxx',
password: 'xxxxxx',
checked: false
}, {
id: 3,
username: 'xxxxx',
password: 'xxxxxx',
checked: false
}]

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

Шаблон:

<input type="checkbox" id="{{id}}" name="feature{{id}}"
    value="{{column.id}}"   [checked]="column.checked" ([ngModel])="column.checked" (click)="validate(column, $event)">

Внутри компонента:

validate(id, column, event ){
   column.checked = !column.checked;
   console.log(column.id); // using this value, you can perform logic with tables array.

}