*ngIf 显示 ngx-datatable 上的行按钮

Question

I have a populated table and by default on load, one of the columns has a hidden element by a show button. I'm looking to show the input per row, but currently when the button is clicked, the hidden button shows all of the fields.

HTML Table -

<ngx-datatable
   class="material"
   rowHeight="auto"
   [loadingIndicator]="tableLoading"
   [columnMode]="ColumnMode.force"
   [rows]="rows"
   [headerHeight]="50"
   [footerHeight]="50"
   [limit]="30"
   [selected]="selected"
   [selectionType]="SelectionType.checkbox"
   [selectAllRowsOnPage]="false"
   (select)="onSelect($event)"
   [sorts]="[{prop: 'lastName', dir: 'asc'}]"
 >

<ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-row="row">

 <ng-select
    *ngIf="singleItem"
    [multiple]="true"
    placeholder="Select a single medication to send"
    appendTo="body"
    (change)="onChange($event)"
    [items]="row.medications.items"
    bindLabel="name"
    bindValue="id"
    [(ngModel)]="selectedMedications[row.id]">
 </ng-select>

<div *ngIf="!singleItem">
   <p class="btn btn-light" type="button" (click)="buttonSwitch([row.id])">
      Single item 
   </p>
</div>

TS -

singleItem: boolean;

buttonSwitch(row) {
  console.log(row);
  this.singleItem = true;
}

Once the button switch is clicked, the input field for only the row should appear.

Answer 1

You need a singleItem or another named flag for each row. Right now you have one for all entries, that's why when you click on the button, it changes all rows.

On this buttonSwitch function, you're getting the row parameter and not using it. You should have something like this:

buttonSwitch(row) {
  row.singleItem = true;
  // Or the
  // row.singleItem = !row.singleItem;
  // To switch the value, and not only set as true
}

Then your *ngIf would be like this: *ngIf="row.singleItem"