web-dev-qa-db-ja.com

ngx-datable - アクションボタンを持つカスタム列

私はテーブルを持っています（ NGX-DataTable ）。

列を作成してボタンを作動させたが、選択された行とその列の値が私のトリガ機能内で認識されなくなるという問題があります。

これが私のテンプレートです：

<div class="col-12">
  <ngx-datatable
    #table
    class="material"
    [rowHeight]="'auto'"
    [columns]="columns"
    [columnMode]="'force'"
    [headerHeight]="50"
    [footerHeight]="50"
    [limit]="10"
    [rows]="cars?.content"
    [selected]="selected"
    [selectionType]="'multi'">
  </ngx-datatable>
</div>
 _

これがボタン付きのカスタムテンプレートです。

<ng-template #buttonsTemplate let-row="row" let-value="value" let-button="column.actions">
  <button class="btn btn-transparent" (click)='onSelect($event)'><i class="rb-ic rb-ic-add-frame"></i></button>
  <button class="btn bt n-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-abort-frame"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-reset"></i></button>
  <button class="btn btn-transparent" (click)='onSelect($event)><i class="rb-ic rb-ic-agility"></i></button>
</ng-template>
 _

私のコンポーネント（.tsファイル）は次のように構成されています。

export class MyComponent implements OnInit, OnDestroy {
  @ViewChild('buttonsTemplate') buttonsTemplate: TemplateRef<any>;
  columns = [];

  ngOnInit() {
    this.columns = [
    {prop: 'id', name: 'Id'},
    {prop: 'serial_number', name: 'Serial Number'},
    {prop: 'actions', name: 'Actions', cellTemplate: this.buttonsTemplate}
    ];
  }

  // This method should be called after clicking an action button
  onSelect({selected}) {
    console.log('Array of selected vehicles', selected);
  }
}
 _

現在、このエラーはコンソールで発生します。

エラーTYPEERROR：未定義のプロパティ 'serial_number'を読み取ることができません

私は何が悪いのですか？ 公式文書 と デモページ は私を助けてくれません。

@Wentjunからのアプローチ（編集されていない：ボタンの内側のビジュアルではありません）

テンプレート：

<ngx-datatable-column *ngFor="let column of columns; let i = index;" name="{{column.name}}" prop="{{column.prop}}">
  <ng-template #buttonsTemplate let-row="row" let-value="value" ngx-datatable-cell-template>
    <button class="btn btn-transparent" (click)='onSelect(row)'><i class="rb-ic rb-ic-add-frame"></i></button>
  </ng-template>
</ngx-datatable-column>
 _

コンポーネント（関数）：

onSelect({selected}) {
  console.log('Array of selected vehicles', selected);
}
 _
angularangular-materialngx-datatableviewchildng-template
4
Codehan25

私は_ngx-datatable_ライブラリを使っています、そして私はあなたのプロジェクトに同様のセットアップを持っています、したがって私はあなたの問題がどこから来ているのかを見ると思います。

あなたの_<ng-template>_が_<ngx-datatable-column>_内に入れ子になっていない場合は、それを入れるべきです。さらに、clickイベントバインディングでは、行データにアクセスしようとしているため、rowの値をonSelect()メソッドに渡す必要があります。 _ngx-datatable-cell-template_内の_<ng-template>_ディレクティブも使用する必要があります。

これはあなたが作っているべき変更です：

_<ngx-datatable 
[rows]="rows" 
class="material" 
[loadingIndicator]="loadingIndicator"
[columnMode]="'force'" 
[headerHeight]="50" 
[footerHeight]="50" 
[rowHeight]="'auto'"
[columns]="columns" 
[reorderable]="reorderable">

  <ngx-datatable-column *ngFor="let column of columns; let i = index;" name="{{column.name}}" prop="{{column.prop}}">
    <ng-template let-value="value" let-row="row" *ngIf="column.name==='Actions'" ngx-datatable-cell-template>
      <span>
        <button style="background-color:red;height:15px;" (click)='onSelectRed(row)'><i class="rb-ic rb-ic-add-frame"></i></button>
        <button style="background-color:blue;height:15px;" class="btn" (click)='onSelectBlue(value)'><i class="rb-ic rb-ic-add-frame"></i></button>
      </span>
    </ng-template>
  </ngx-datatable-column>
</ngx-datatable>
_

そしてあなたのcomponent.tsでは、クリックメソッドでバインドした値に応じて、行全体のデータ、またはプロパティ自体の値にアクセスできるはずです。

_onSelectRed(row) {
  console.log(row);
}

onSelectBlue(value) {
  console.log(value);
}
_

私はデモオーバー ここ を作成しました。ご覧のとおり、rowとバインドされたプロパティ（id）の値は、行ボタン自体内でアクセスできます。

1
wentjun

クレジットへ @ m4limo

（私自身の観察を追加しました）

元のコメント

ng-tamplateを使用するだけです。

<ngx-datatable-column name="Actions" sortable="false" prop="id">
      <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>

            <button md-icon-button (click)="blockAgents(value)">
              <i class="fa fa-ban"></i>
            </button>

            <button md-icon-button (click)="approveAgent(value)">
              <i class="fa fa-check"></i>
            </button>

      </ng-template>
</ngx-datatable-column>

valueは、ngx-datatable-column、この場合はpropで定義するプロパティidに対応します。

見通し

ngx-datatable-column要素のpropプロパティ内の列PROP名を宣言する必要があります。let-valueは、この場合、ng-template子オブジェクトで割り当てられている/使用されます。

"value"は列prop値を使用して、行（オブジェクトリスト）からプロパティ値を取得します。列PROP名[〜＃〜]行オブジェクトのプロパティと一致する[〜＃〜]が必要です。

ノート

  • Angular 9.1.1でテスト済み（IVYを使用）
  • @ SWIMLANE/NGX-DataTable 16.0.3を使用する

オリジナルのGithubコメント ここ

1
KBeDev
_<ng-container *ngFor='let column of columns' >
            <ngx-datatable-column *ngIf='column.name === "Actions"' name="Actions" prop="actions">
                <ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
                    <span>
                        <button class='btn btn-icon icon-left'>
                            Continue
                            <i [ngClass]='row.actions.continue'></i>
                        </button>
                        <button class='btn btn-icon icon-left'>
                            Remove
                            <i [ngClass]='row.actions.delete'></i>
                        </button>
                    </span>
                </ng-template>
            </ngx-datatable-column>
            <ngx-datatable-column *ngIf='column.name !== "Actions"' name="{{column.name}}" prop="{{column.prop}}">
            </ngx-datatable-column>
        </ng-container>
_

Op Guthjunのソリューションは、Angular 10以降のNGコンテナでも機能します。

1
AGoodnight

_$event_の代わりにrowを渡します。

_<ng-template #buttonsTemplate let-row="row" let-value="value">
  <button class="btn btn-transparent" (click)='onSelect(row)'><i class="rb-ic rb-ic-add-frame"></i></button>
  <button class="btn bt n-transparent" (click)='onSelect(row)><i class="rb-ic rb-ic-abort-frame"></i></button>
  <button class="btn btn-transparent" (click)='onSelect(row)><i class="rb-ic rb-ic-reset"></i></button>
  <button class="btn btn-transparent" (click)='onSelect(row)><i class="rb-ic rb-ic-agility"></i></button>
</ng-template>
_

そしてonSelect関数では、行の詳細にアクセスすることができます。

_onSelect(row) { 
  console.log(row); 
}
_

作業を見つけてください デモ

0
Vikash B