ng2-smart-таблица, как изменить показ пользовательских кнопок и скрыть их при нажатии - PullRequest
Новая
       33

ng2-smart-таблица, как изменить показ пользовательских кнопок и скрыть их при нажатии

1 голос
/ 15 марта 2019

У меня есть игра и запуск пользовательской кнопки.Когда я нажимаю на значок воспроизведения, должен отображаться значок остановки, а значок воспроизведения должен быть скрыт для строки, в которой я щелкнул. 

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

    ],
	},
  .....
  
  }

как решить?

1 Ответ

0 голосов
/ 11 апреля 2019

Я думаю, что самый простой способ сделать это - использовать пользовательский компонент .Вы можете указать столбец, в котором компонент будет отображаться в каждой строке, и инкапсулировать поведение воспроизведения / остановки в этом компоненте.

Сначала создайте пользовательский компонент , например 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-таблицу настройки , добавление столбца : 

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

Вот и все! Вы получите желаемое поведение для кнопки воспроизведения / остановки, а также способ заставить что-то произойти, когда нажата кнопка воспроизведения / остановки.

Примечание. Я не выполняю рендеринг пользовательского компонента в части action настроек ng2-smart-tableиз-за того, что он не работает, когда я попробовал (вместо этого я отображаю его в столбце).Если вы можете заставить его работать, продолжайте.

...