我遇到了输出发射器在父组件中不工作的问题。它在子组件中工作,但在父组件中没有触发。它应该是正确的配置。为什么它在父组件中不发射? 我有一个问题,输出发射器在父组件中不工作。它在子组件中工作,但在父组件中没有触发。应该是正确的配置。为什么它在父组件中不被触发?
子模板。
<div>
<ngx-table
#table
[id]="id"
[configuration]="configuration"
[data]="data"
[columns]="columns"
[noResultsTemplate]="noResultsTemplate">
</ngx-table>
<button (click)="onUpdateClick()"> Update </button>
<button (click)="onDeleteClick()"> Delete </button>
</div>
子控制器
import { Component, OnInit, Input, ViewChild, Output, EventEmitter, TemplateRef } from '@angular/core';
import { DefaultConfig, Config, Columns, APIDefinition, API } from 'ngx-easy-table';
import { CallType } from '../../models/call';
@Component({
selector: 'app-datatable',
templateUrl: './datatable.component.html',
styleUrls: ['./datatable.component.scss']
})
export class DatatableComponent implements OnInit {
@ViewChild('table', { static: true }) table: APIDefinition;
@ViewChild('actionTable', { static: true }) actionTable: TemplateRef<any>;
@Output() updateButtonClick = new EventEmitter<>();
@Output() deleteButtonClick = new EventEmitter<>();
@Input() columns: Columns[];
@Input() data: any;
@Input() id: any;
public configuration: Config;
constructor() {}
ngOnInit(): void {
this.configuration = { ...DefaultConfig };
this.configuration.searchEnabled = false;
this.configuration.rows = 3;
this.columns = [...this.columns, {key: 'action', title: 'Action', cellTemplate: this.actionTable, width: '15%'}];
}
onChange(name: string): void {
this.table.apiEvent({
type: API.onGlobalSearch, value: name,
});
}
onUpdateClick() {
console.log();
this.updateButtonClick.emit();
}
onDeleteClick() {
this.deleteButtonClick.emit();
}
}
父母模板
<app-datatable
[id]="'idMytable'"
[data]="data" [columns]="columns">
(updateButtonClick)="openEditCallTypeModal()"
(deleteButtonClick)="openDeleteCallTypeModal()">
</app-datatable>
母控制器
import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { APIDefinition, Config, Columns, DefaultConfig, API } from 'ngx-easy-table';
import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
import { SettingService } from '../../setting.service';
import { CallType } from 'src/app/shared/models/call';
import { CallTypeModalComponent } from './edit-call-type/call-type-modal.component';
@Component({
selector: 'app-call-type-table',
templateUrl: './call-type-table.component.html',
styleUrls: ['./call-type-table.component.scss']
})
export class CallTypeTableComponent implements OnInit {
@Input() callTypes: CallerType[];
columns = [
{ key: 'id', title: 'Id', width: '10%'},
{ key: 'nameEN', title: 'English', width: '25%' }
];
bsModalRef: BsModalRef;
constructor(private modalService: BsModalService, private settingService: SettingService) {}
ngOnInit(): void {
}
openDeleteCallTypeModal() {//not firing code
console.log('clicked');
}
openEditCallTypeModal(){
// here is not calling
console.log("work");
}
}
你把不同的处理程序绑定到同一个发射器上 (updateButtonClick
)在父模板中出现两次。
<!-- wrong -->
<app-datatable
[id]="'idMytable'"
[data]="data" [columns]="columns"> /// here is something wrong
(updateButtonClick)="openEditCallTypeModal()"
(updateButtonClick)="openDeleteCallTypeModal()">
</app-datatable>
应该是
<app-datatable
[id]="'idMytable'"
[data]="data" [columns]="columns"
(updateButtonClick)="openEditCallTypeModal()"
(deleteButtonClick)="openDeleteCallTypeModal()">
</app-datatable>