I am getting ObjectUnsubscribedError while toggling the Click button(view_click).
ObjectUnsubscribedError {name: "ObjectUnsubscribedError", stack: "ObjectUnsubscribedError: object unsubscribed↵
a…(ng:///AppModule/UserComponent.ngfactory.js:43:5)", message: "object unsubscribed", ngDebugContext: DebugContext_, ngErrorLogger: ƒ}
View as following:
<button class="btn" (click)="view_click(e)">Click</button>
<div class="container-fluid" *ngIf="list_v; ">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="header">
<h4 class="title">User List</h4>
<p class="category">List all users</p>
</div>
<div class="content table-responsive table-full-width">
<table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover" (click)="table_click($event.target)"></table>
</div>
</div>
</div>
</div>
</div>
component as following:
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { DataTableDirective } from 'angular-datatables';
import { HttpClient } from '@angular/common/http';
import { Subject } from 'rxjs/Subject';
@Component({
selector: 'app-user',
templateUrl: 'user.component.html'
})
export class UserComponent implements OnInit, AfterViewInit {
list_v=true;
constructor(private http: HttpClient){ }
view_click(e:HTMLElement){
if(this.list_v){
this.list_v=false;
}else{
this.list_v=true;
}
}
@ViewChild(DataTableDirective)
dtElement: DataTableDirective;
dtOptions: DataTables.Settings = {};
dtTrigger: Subject<any> = new Subject();
ngOnInit(): void {
this.dtOptions = {
ajax: 'http://localhost/angular/backend/users',
columns: [{
title: 'ID',
data: 'id'
}, {
title: 'Name',
data: 'name'
}, {
title: 'Action',
data: 'action'
}]
};
}
ngOnDestroy() {
}
ngAfterViewInit(): void {
this.dtTrigger.next();
}
table_click(e:HTMLElement){
// if(e.attributes.getNamedItem('delete_id')){
// var id=e.attributes.getNamedItem('delete_id').nodeValue;
// this.http.get('http://localhost/angular/backend/delete/user/'+id,)
// .subscribe(
// (data) => this.delete(data), //For Success Response
// err => {console.error(err)} //For Error Response
// );
// }
}
delete(data){
this.rerender();
}
rerender(): void {
this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
// Destroy the table first
dtInstance.destroy();
// Call the dtTrigger to rerender again
this.dtTrigger.next();
});
}
}
Seems when you are doing rerender, it removes all listeners as rerender is done not in angular way. So after rerender click listener is working somehow but "table_click(e:HTMLElement)" not. So you need to check 'angular-datatables' repo for similar issues. I'm not 100% sure, but it seems to be so.
in component add:
subscription: any;
Create subscription for GET
request
table_click(e:HTMLElement){
if(e.attributes.getNamedItem('delete_id')){
var id=e.attributes.getNamedItem('delete_id').nodeValue;
// ------- update subscription -----//
this.subscription = this.http.get('http://localhost/angular/backend/delete/user/'+id)
.subscribe((data) => this.delete(data), //For Success Response
err => {console.error(err)} //For Error Response);
}
}
then unsubscribe
it in delete
as:
delete(data){
this.subscription.unsubscribe();
this.rerender();
}
also unsubscribe in in ngOnDestroy
as:
ngOnDestroy() {
this.subscription.unsubscribe();
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.