Javascript ng2智能表格如何更改自定义按钮单击显示和隐藏

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

---

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

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

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);
    }
}

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

注意：我没有在ng2智能表设置的

操作

部分中呈现自定义组件，因为在尝试时它不工作（而是在列中呈现）。如果你能成功，那就去吧

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).
        });
    }
},