Отображение столбца нажатием кнопки

Question

Мне нужно показать столбец, когда пользователь нажимает кнопку Edit.Столбец покажет символ удаления в столбце «Действия».Я не уверен, как это сделать.Если я добавлю «Действия» в displayedColumn, кнопка редактирования не будет работать, и она вызвала ошибку, указав несколько привязок.

HTML:

<div class="button">
  <button mat-button (click)="toggleButton()"><i class="fa fa-edit"></i>
    Edit </button>
</div>

<div class="Edit" *ngIf="showDetails">     
             <div class="form-container">
                <div>Edit</div>
                <mat-form-field class="subjectCode">
                    <input matInput  placeholder="Subject Code">                  
                </mat-form-field>           
            </div>                  
</div>


<div class="table-container">
  <table mat-table [dataSource]="subjectData">
    <ng-container matColumnDef="Subject Number">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>#</th>
      <td mat-cell *matCellDef="let i = index">{{ i + 1 }}</td>
    </ng-container>
    <ng-container matColumnDef="Subject_Code">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Subject
        Code</th>
      <td mat-cell *matCellDef="let element">{{ element.Subject_Code 
              }}</td>
    </ng-container>
    <ng-container matColumnDef="Subject Name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Subject
        Name</th>
      <td mat-cell *matCellDef="let element">{{ element.Subject_Name 
              }}</td>
    </ng-container>
    <ng-container *ngIf="showDetails" matColumnDef="Actions">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Action</th>
      <td mat-cell *matCellDef="let element">
        <button mat-button><i class="fa fa-trash"></i></button>
      </td>
    </ng-container>
  </table>
</div>

TS:

export class SubjectListComponent implements OnInit {

  displayedColumns: string[] = ['Number', 'Subject_Code',
    'Subject_Name', 'Actions'
  ];

  showDetails: boolean;

  constructor() {
    this.showDetails = false;
  }

  toggleButton() {
    this.showDetails = !this.showDetails;
  }
}    

Answer 1

Вы можете просто показать / скрыть столбец, добавив / удалив имя столбца в массиве displayedColumns.

Извлечение этого стекаблика.

Основным изменением будет функция toggleButton (и все вместе свойство showDetails удалится):

toggleButton() {
  let index = this.displayedColumns.indexOf('Actions');
  if (index > -1) {
    this.displayedColumns.splice(index, 1);
  } else {
    this.displayedColumns.push('Actions');
  }
}

Answer 2

Вы можете получить выделенную ячейку с помощью

var focusedCell = gridOptions.api.getFocusedCell();

или использовать событие onCellFocused.

Оба предоставляют вам следующие свойства:

rowIndex: number
column: Column

Использованиеиндекс строки для извлечения узла строки:

var row = gridOptions.api.getDisplayedRowAtIndex(rowIndex);

После этого вы можете использовать эти свойства для получения необработанного значения ячейки:

var cellValue = gridOptions.api.getValue(colKey, row.node)

Answer 3

проверить

Javascript-сетка-выбор

Вы можете получить сфокусированную клетку, используя

var focusedCell = gridOptions.api.getFocusedCell();

или используйте событие onCellFocused.

Оба дают вам следующие свойства:

rowIndex: number
column: Column

Использование индекса строки для извлечения узла строки:

var row = gridOptions.api.getDisplayedRowAtIndex(rowIndex);

После этого вы можете использовать эти свойства для получения необработанного значения ячейки:

var cellValue = gridOptions.api.getValue(colKey, row.node)