Question

我在切换Click按钮（view_click）时收到ObjectUnsubscribedError。

ObjectUnsubscribedError {name：“ObjectUnsubscribedError”，stack： “ObjectUnsubscribedError：object unsubscribed↵ a ...（ng：///AppModule/UserComponent.ngfactory.js：43：5）“，消息：”对象 unsubscribed“”，ngDebugContext：DebugContext _，ngErrorLogger：ƒ}

查看如下：

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

组件如下：

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

Answer 1

当你正在进行重新渲染时，它会删除所有侦听器，因为重新渲染不是以角度方式完成的。所以在重新渲染之后，点击监听器正在以某种方式工作，但是＆＃34; table_click（e：HTMLElement）＆＃34;不。所以你需要检查角度数据表＆＃39;回购类似的问题。我不是百分百肯定，但似乎是这样。

Answer 2

组件中的

添加：

subscription: any;

为GET请求

创建订阅

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

然后unsubscribe将其delete作为：

delete(data){
    this.subscription.unsubscribe();
    this.rerender();
}

也在ngOnDestroy取消订阅：

ngOnDestroy() {
  this.subscription.unsubscribe();
}

删除和添加数据表时Angular 4 ObjectUnsubscribedError错误

2 个答案: