2

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

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

    ],
	},
  .....
  
  }

如何解决？

4

1 回答 1

2

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

首先，创建一个自定义组件，例如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).
        });
    }
},

而已！您将拥有播放/停止按钮所需的行为，以及单击播放/停止按钮时发生某些事情的方法。

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

于 2019-04-11T03:50:45.983 回答