Question

我有播放并启动自定义按钮。当我单击“播放”图标时，“停止”图标应可见，而“播放”图标应隐藏在我单击的行中。

android.permission.INTERNET

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

如何解决？

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部分中呈现自定义组件，因为尝试该组件时它不起作用（我将其呈现在列中）。如果可以使用，请继续。

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

1 个答案: