fix(table): fix a bug where source changes but filter doesn't get upd…

…ated (#331)
akveo · Apr 28, 2017 · c48818f · c48818f
1 parent 89e4bec
commit c48818f
Showing 1 changed file with 24 additions and 16 deletions.
diff --git a/src/ng2-smart-table/components/filter/filter.component.ts b/src/ng2-smart-table/components/filter/filter.component.ts
@@ -1,7 +1,8 @@
-import { Component, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';
+import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 
 import { DataSource } from '../../lib/data-source/data-source';
 import { Column } from '../../lib/data-set/column';
+import { Subscription } from 'rxjs/Subscription';
 
 @Component({
   selector: 'ng2-smart-table-filter',
@@ -35,7 +36,7 @@ import { Column } from '../../lib/data-set/column';
     </div>
   `,
 })
-export class FilterComponent implements AfterViewInit {
+export class FilterComponent implements OnChanges {
 
   @Input() column: Column;
   @Input() source: DataSource;
@@ -45,22 +46,29 @@ export class FilterComponent implements AfterViewInit {
 
   query: string = '';
 
-  ngAfterViewInit() {
-    this.source.onChanged().subscribe((elements) => {
-      const filterConf = this.source.getFilter();
-      if (filterConf && filterConf.filters && filterConf.filters.length === 0) {
-        this.query = '';
+  protected dataChangedSub: Subscription;
 
-        // add a check for existing filters an set the query if one exists for this column
-        // this covers instances where the filter is set by user code while maintaining existing functionality
-      } else if (filterConf && filterConf.filters && filterConf.filters.length > 0) {
-        filterConf.filters.forEach((k: any, v: any) => {
-          if (k.field == this.column.id) {
-            this.query = k.search;
-          }
-        });
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.source) {
+      if (!changes.source.firstChange) {
+        this.dataChangedSub.unsubscribe();
       }
-    });
+      this.dataChangedSub = this.source.onChanged().subscribe((dataChanges) => {
+        const filterConf = this.source.getFilter();
+        if (filterConf && filterConf.filters && filterConf.filters.length === 0) {
+          this.query = '';
+
+          // add a check for existing filters an set the query if one exists for this column
+          // this covers instances where the filter is set by user code while maintaining existing functionality
+        } else if (filterConf && filterConf.filters && filterConf.filters.length > 0) {
+          filterConf.filters.forEach((k: any, v: any) => {
+            if (k.field == this.column.id) {
+              this.query = k.search;
+            }
+          });
+        }
+      });
+    }
   }
 
   onFilter(query: string) {