Fix incorrect option update by declaring dxi components with ng-for

Author: kvet

src/core/nested-option.ts

@@ -6,42 +6,38 @@ export interface INestedOptionContainer {
 
 export interface OptionPathGetter { (): string; }
 
-export abstract class NestedOption implements INestedOptionContainer, ICollectionNestedOptionContainer {
+export abstract class BaseNestedOption implements INestedOptionContainer, ICollectionNestedOptionContainer {
     protected _host: INestedOptionContainer;
     protected _hostOptionPath: OptionPathGetter;
     private _collectionContainerImpl: ICollectionNestedOptionContainer;
     protected _initialOptions = {};
 
-    protected _getOptionPath() {
-        return this._hostOptionPath() + this._optionPath + '.';
+    protected abstract get _optionPath(): string;
+    protected abstract _fullOptionPath(): string;
+
+    constructor(private _element: ElementRef) {
+        this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this));
     }
 
     protected _getOption(name: string): any {
-        if (this.instance) {
-            return this.instance.option(this._getOptionPath() + name);
+        if (this.isLinked) {
+            return this.instance.option(this._fullOptionPath() + name);
         } else {
             return this._initialOptions[name];
         }
     }
 
     protected _setOption(name: string, value: any) {
-        if (this.instance) {
-            this.instance.option(this._getOptionPath() + name, value);
+        if (this.isLinked) {
+            this.instance.option(this._fullOptionPath() + name, value);
         } else {
             this._initialOptions[name] = value;
         }
     }
 
-    protected abstract get _optionPath(): string;
-
-    constructor(private _element: ElementRef) {
-        this._collectionContainerImpl = new CollectionNestedOptionContainerImpl(this._setOption.bind(this));
-    }
-
     setHost(host: INestedOptionContainer, optionPath: OptionPathGetter) {
         this._host = host;
         this._hostOptionPath = optionPath;
-        this._host[this._optionPath] = this._initialOptions;
     }
 
     _template(...args) {
@@ -57,6 +53,9 @@ export abstract class NestedOption implements INestedOptionContainer, ICollectio
         return this._host && this._host.instance;
     }
 
+    get isLinked() {
+        return !!this.instance;
+    }
 }
 
 export interface ICollectionNestedOptionContainer {
@@ -65,8 +64,7 @@ export interface ICollectionNestedOptionContainer {
 
 export class CollectionNestedOptionContainerImpl implements ICollectionNestedOptionContainer {
     private _activatedQueries = {};
-    constructor(private _setOption: Function) {
-    }
+    constructor(private _setOption: Function) {}
     setChildren<T extends ICollectionNestedOption>(propertyName: string, items: QueryList<T>) {
         if (items.length) {
             this._activatedQueries[propertyName] = true;
@@ -81,21 +79,37 @@ export class CollectionNestedOptionContainerImpl implements ICollectionNestedOpt
     }
 }
 
+export abstract class NestedOption extends BaseNestedOption {
+    setHost(host: INestedOptionContainer, optionPath: OptionPathGetter) {
+        super.setHost(host, optionPath);
+
+        this._host[this._optionPath] = this._initialOptions;
+    }
+
+    protected _fullOptionPath() {
+        return this._hostOptionPath() + this._optionPath + '.';
+    }
+}
+
 export interface ICollectionNestedOption {
     _index: number;
     _value: Object;
 }
 
-export abstract class CollectionNestedOption extends NestedOption implements ICollectionNestedOption {
+export abstract class CollectionNestedOption extends BaseNestedOption implements ICollectionNestedOption {
     _index: number;
 
-    protected _getOptionPath() {
+    protected _fullOptionPath() {
         return this._hostOptionPath() + this._optionPath + '[' + this._index + ']' + '.';
     }
 
     get _value() {
         return this._initialOptions;
     }
+
+    get isLinked() {
+        return this._index !== undefined && !!this.instance;
+    }
 }
 
 export class NestedOptionHost {
@@ -107,7 +121,7 @@ export class NestedOptionHost {
         this._optionPath = optionPath || (() => '');
     }
 
-    setNestedOption(nestedOption: NestedOption) {
+    setNestedOption(nestedOption: BaseNestedOption) {
         nestedOption.setHost(this._host, this._optionPath);
     }
 }

templates/nested-component.tst

@@ -53,7 +53,7 @@ export class <#= it.className #>Component extends <#= it.baseClass #> {<#~ it.pr
         this.template = this._template.bind(this);
 <#?#>
         parentOptionHost.setNestedOption(this);
-        optionHost.setHost(this, this._getOptionPath.bind(this));
+        optionHost.setHost(this, this._fullOptionPath.bind(this));
     }
 }
 

tests/src/core/nested-option.spec.ts

@@ -90,7 +90,7 @@ export class DxiTestCollectionOptionComponent extends CollectionNestedOption {
         super(element);
 
         this._pnoh.setNestedOption(this);
-        this._noh.setHost(this, this._getOptionPath.bind(this));
+        this._noh.setHost(this, this._fullOptionPath.bind(this));
     }
 }
 

tests/src/ui/list.spec.ts

@@ -206,6 +206,33 @@ describe('DxList', () => {
         expect(instance.element().find('.dx-item-content').eq(1).text()).toBe('2');
     }));
 
+    it('should be able to replace items by ng-for', async(() => {
+        TestBed.overrideComponent(TestContainerComponent, {
+            set: {
+                template: `
+                    <dx-list>
+                        <dxi-item *ngFor="let item of items" [badge]="10">{{item}}</dxi-item>
+                    </dx-list>
+                `
+            }
+        });
+        let fixture = TestBed.createComponent(TestContainerComponent),
+            testComponent = fixture.componentInstance;
+
+        testComponent.items = [1, 2];
+        fixture.detectChanges();
+
+        let instance = getWidget(fixture);
+
+        testComponent.items = [3, 4];
+        fixture.detectChanges();
+
+        expect(instance.option('items').length).toBe(2);
+        expect(instance.element().find('.dx-item-content').length).toBe(2);
+        expect(instance.element().find('.dx-item-content').eq(0).text()).toBe('3');
+        expect(instance.element().find('.dx-item-content').eq(1).text()).toBe('4');
+    }));
+
     it('should be able to clear items rendered with *ngFor', async(() => {
         TestBed.overrideComponent(TestContainerComponent, {
             set: {