Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/30.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 无法在ngx数据表中添加自定义按钮_Javascript_Angular_Typescript_Ngx Datatable - Fatal编程技术网

Javascript 无法在ngx数据表中添加自定义按钮

Javascript 无法在ngx数据表中添加自定义按钮,javascript,angular,typescript,ngx-datatable,Javascript,Angular,Typescript,Ngx Datatable,我是angular和ngx datatable的新手,在提出这些问题之前。我已经回答了与我所面临的问题相同的问题,即在angular的ngx datatable的每一行中添加自定义按钮 我的HTML模板如下所示: <ngx-datatable [rows]="rows" [loadingIndicator]="loadingIndicator" class="bootstrap" [selected]="

我是angular和ngx datatable的新手,在提出这些问题之前。我已经回答了与我所面临的问题相同的问题,即在angular的ngx datatable的每一行中添加自定义按钮

我的HTML模板如下所示:


<ngx-datatable [rows]="rows" [loadingIndicator]="loadingIndicator" class="bootstrap"
        [selected]="selected" (activate)="onActivate($event, NewEventContent)">        
      
        <ngx-datatable-column *ngFor="let column of columns; let i = index;" 
        name="{{column.name}}" prop="{{column.prop}}">        

        <ngx-datatable-column name="Actions" prop="skuCode"></ngx-datatable-column>          

        <ng-template let-value="value" let-row="row" let-rowIndex="rowIndex"
          *ngIf="column.name==='Actions'" ngx-datatable-cell-template>
          <button type="button" class="btn btn-outline-success">Success {{rowIndex}}</button>
        </ng-template>
        
        </ngx-datatable-column>     
      </ngx-datatable>
我不知道我这次做错了什么,我在其他类似问题的答案中也看到过类似的方法,但没有一个对我有效


请提供帮助。

我找到了解决此问题的替代方法,并成功实现了每行的自定义按钮。所以我想回答这个问题,这样对任何人都有帮助

更改后,我的HTML模板如下所示

<ngx-datatable [rows]="rows" class="material" [loadingIndicator]="loadingIndicator" 
      [columnMode]="'force'"
      [selected]="selected" (activate)="onActivate($event, NewEventContent)"
        [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [columns]="columns">

        <ngx-datatable-column *ngFor="let column of columns; 
        let i = index;" name="{{column.name}}"
          prop="{{column.prop}}">
        </ngx-datatable-column>

        <ngx-datatable-column name="Actions" sortable="false" prop="Id">
          <ng-template let-row="row" let-value="value" let-rowIndex="rowIndex"
           ngx-datatable-cell-template>
            <button class="btn btn-dark" (click)="onSelect(row)">
              Edit{{rowIndex + 1}}
            </button>
          </ng-template>
        </ngx-datatable-column>

      </ngx-datatable>

编辑{{rowIndex+1}}
请注意ng模板部分和onSelect(行)功能。上述解决方案在我的案例中非常有效

原始答案

这是否回答了您的问题?是的,@Abdo-Host我也尝试过这个链接,但什么都没有。我甚至不知道类似类型的设置是不是给了我想要的结果。
<ngx-datatable [rows]="rows" class="material" [loadingIndicator]="loadingIndicator" 
      [columnMode]="'force'"
      [selected]="selected" (activate)="onActivate($event, NewEventContent)"
        [headerHeight]="50" [footerHeight]="50" [rowHeight]="'auto'" [columns]="columns">

        <ngx-datatable-column *ngFor="let column of columns; 
        let i = index;" name="{{column.name}}"
          prop="{{column.prop}}">
        </ngx-datatable-column>

        <ngx-datatable-column name="Actions" sortable="false" prop="Id">
          <ng-template let-row="row" let-value="value" let-rowIndex="rowIndex"
           ngx-datatable-cell-template>
            <button class="btn btn-dark" (click)="onSelect(row)">
              Edit{{rowIndex + 1}}
            </button>
          </ng-template>
        </ngx-datatable-column>

      </ngx-datatable>