javascript - ng2-smart-table如何更改自定义按钮在点击时的显示和隐藏

Question

我有播放和开始自定义按钮。当我单击播放图标时，停止图标应该可见，并且对于我单击的行，播放图标应该隐藏。

<ng2-smart-table [settings]="settings" [source]="source" (userRowSelect)="AdapInformation($event)"  (deleteConfirm)="onDeleteAdap($event)">

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>' }

    ],
	},
  .....
  
  }

如何解决？

Answer 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 部分中渲染自定义组件，因为它在我尝试时不起作用(我将其渲染在一列中)反而)。如果你能成功，那就继续吧。