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

退房

javascript-grid-selection

您可以使用来获取焦点单元格

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 2

您可以通过将列的名称添加/删除到df1: df2: df3: X DF_NAME Y Z 1 5 15 3 8 88 5 95 77 8 23 36 95 44 1 15 3 36数组中来显示/隐藏列。

退房 this 堆叠闪电战。

主要更改将在displayedColumns函数中（并同时删除toggleButton属性）：

showDetails

Answer 3

您可以使用来获取焦点单元格

var focusedCell = gridOptions.api.getFocusedCell();

或使用onCellFocused事件。

两者都为您提供以下属性：

rowIndex: number
column: Column

使用行索引检索行节点：

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

之后，您可以使用这些属性来检索单元格的原始值：

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

通过单击按钮显示列

3 个答案: