PrimeNG editable table with checkbox
child component
<p-table id="resultTable" [columns]="cols" [value]="results" scrollable="true" [resizableColumns]="true" selectionMode="single">
...
<ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
...
<td>
<input (click)="checkboxClicked(rowData)" pInputText type="checkbox" [(ngModel)]="rowData.active">
</td>
...
</ng-template>
...
</p-table>
@Component({
selector: 'app-child',
templateUrl: './app-child.html',
styleUrls: ['./app-child.css'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnInit {
...
checkboxClicked(book: Book) {
console.log('111:', book.active); // check the value with ngModel
this.checkboxClick.emit(book);
}
...
}
parent component
...
<app-child (checkboxClick)="checkbox($event)"></app-child>
...
@Component({
selector: 'app-parent',
templateUrl: './app-parent.html',
changeDetection: ChangeDetectionStrategy.OnPush
})
export class ParentComponent implements OnInit, OnDestroy {
checkboxClickSource = new Subject<Book>();
ngOnInit() {
this.checkboxClickSource.pipe(
...
).subscribe(book => {
console.log('222:', book.active); // check the value with ngModel
});
}
checkbox(book: Book) {
this.checkboxClickSource.next(book);
}
}
Then there's problem very strange to me. First suppose book.active is true in the beginning.
In IE browser:
the output is: 111: false
222: false
In chrome browser:
production mode: 111: true
222: false
none production mode:
111: true
222: true
In IE browser, the ngModel works immediately. But in chrome browser and production mode, the ngModel works when the value has been passed to the parent component, but didn't change in child component. In chrome browser and none production mode, the ngModel doesn't work in both child and parent component.
This is really strange to me and I cannot figure it out. Can someone tell me why this is happening?
