Angular 禁用按钮不适用于动态名称

Question

Thank you in advance for helping me with this problem. I'm unable to disable the first button within ngx-datatable-colum which has a dynamic name "Btn_Up_{{row.ordre}}". I've tried it inside ngOnInit and ngAfterViewInit(): (document.getElementById('Btn_Up_0') as HTMLInputElement).disabled=true; . It works only for static names (ids).

The output of ngx-datatable is a list of buttons with a group names from services. The idea is to disable the first button (up) and the last button (down).

My HTML component:

<ngx-datatable                
        #rows
        class="bootstrap expandable"
        [columnMode]="'flex'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [scrollbarV]="false"          
        [rows]="parents">
          <ngx-datatable-column name="Groupe" [flexGrow]="2">
            <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
              <a href="javascript:;" class="text-bold-500 primary text-uppercase" (click)="rechercherApplicationParGroupe(row)">{{ row.libelle }}</a>
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column name="Actions" [flexGrow]="1.5">
            <ng-template let-row="row" let-rowIndex="rowIndex" ngx-datatable-cell-template>
              <button type="button" class="btn btn-sm btn-outline-danger square ml-1 mb-0"  (click)="prepareFormEditGroup(row)" >
                <i class="far fa-edit"></i>
              </button>
              <button type="button" id="Btn_Up_{{row.code}}" (click)='getOrderUp($event,row)' class="btn btn-sm btn-raised btn-primary square ml-1 mb-0">
                <i class="fas fa-angle-up"></i>
              </button>
              <button type="button" name="Btn_Down_{{row.code}}" class="btn btn-sm btn-raised btn-primary square ml-1 mb-0">
                <i class="fas fa-angle-down"></i>
              </button>
            </ng-template>
          </ngx-datatable-column>
  </ngx-datatable>

Answer 1

Instead of disabling the button programmatically as there is a possibility that Angular might not detect this change and hence does not refresh the view, just add the following code for your button:

 <button type="button" class="btn btn-sm btn-outline-danger square ml-1 mb-0" (click)="prepareFormEditGroup(row)" [disabled]="row.code===0">

This should disable the button whenever the "row.code" is set to 0.

Answer 2

You can add [disabled] attribute to your button and handle it in your ts file. like this:

<button type="button" [disabled]="IsDisabled"
 class="btn btn-sm" (click)="prepareFormEditGroup(row)" >
 <i class="far fa-edit"></i>
</button>

and in your component.ts:

IsDisabled: boolean = false;

then base your condition change it.

 this.IsDisabled = true;