ng2-smart-table 如何更改自定义按钮在单击时显示和隐藏答案

【问题标题】：ng2-smart-table how to change custom button show and hide on clickng2-smart-table 如何更改自定义按钮在单击时显示和隐藏
【发布时间】：2019-08-06 12:25:42
【问题描述】：

我有播放和开始自定义按钮。当我点击播放图标时，停止图标应该是可见的，播放图标应该隐藏在我点击的行中。

&lt;ng2-smart-table [settings]="settings" [source]="source" (userRowSelect)="AdapInformation($event)"  (deleteConfirm)="onDeleteAdap($event)"&gt;

settings = {
    
  	actions: {
		columnTitle: 'Action',
		position: 'right',
		add: false,
    
       edit:false,
    custom: [
        { name: 'startAdaptor', title: '<i class="startAdded nb-play nbPlayIcon ng2-smart-actions"></i>' },
        { name: 'stopAdaptor', title: '<i class="stopAdded nb-square ng2-smart-actions"></i>' },
        { name: 'editAdaptor', title: '<i class="nb-edit nbeditStyle ng2-smart-actions"></i>' }

    ],
	},
  .....
  
  }

如何解决？

【问题讨论】：

标签： javascript angular angular7 ng2-smart-table ngx-admin

【解决方案1】：

我认为最简单的方法是使用自定义组件。您可以指定将在每一行上呈现组件的列，并将播放/停止行为封装在此组件中。

首先，创建一个自定义组件，例如MediaControlComponent：

@Component({
selector: 'ngx-media-control',
template: `<a href="javascript:void(0)" (click)="onClick()">
    <i *ngIf="!isPlaying" class="nb-play"></i>
    <i *ngIf="isPlaying" class="nb-square"></i></a>`,
})
export class MediaControlComponent implements OnInit {
    public isPlaying: boolean;
    public renderValue: string;

    @Input() value: string | number;
    @Input() rowData: any;

    @Output() save: EventEmitter<any> = new EventEmitter();

    constructor() {
    }

    ngOnInit() {
        this.renderValue = this.value.toString().toUpperCase();
    }

    onClick() {
        this.isPlaying = this.isPlaying ? false : true;
        this.save.emit(this.rowData);
    }
}

确保在imports 和entryComponents 中将此组件添加到您的模块中。

然后，在您的 ng2-smart-table 设置中，添加一个列：

mediaControl: {
    title: 'mediaControl',
    type: 'custom',
    renderComponent: MediaControlComponent,
    onComponentInitFunction: (instance: any) => {
        instance.save.subscribe(row => {
            // Do something (you have the row information in the `row` variable).
        });
    }
},

就是这样！您将获得播放/停止按钮所需的行为，以及单击播放/停止按钮时发生某些事情的方法。

注意：我没有在 ng2-smart-table 设置的action 部分渲染自定义组件，因为我尝试它时它不起作用（我将它渲染在一个列中）。如果你能做到，那就去吧。

【讨论】：