Can't add more item if destination array is pre-defined

[harishajdarevic]

What is happening is that it doesn't work if destination array is already predefined.

If I set destination array as predefined and then try to add more items I'm getting the error:

custom-listbox.component.html:22 ERROR TypeError: Cannot add property 2, object is not extensible
    at Array.push (<anonymous>)
    at _loop_1 (angular-dual-listbox.js:416)
    at CustomListboxComponent.push../node_modules/angular-dual-listbox/fesm5/angular-dual-listbox.js.DualListComponent.trueUp (angular-dual-listbox.js:424)
    at CustomListboxComponent.push../node_modules/angular-dual-listbox/fesm5/angular-dual-listbox.js.DualListComponent.moveItem (angular-dual-listbox.js:565)
    at Object.handleEvent (custom-listbox.component.html:22)
    at handleEvent (core.js:29239)
    at callWithDebugContext (core.js:30309)
    at Object.debugHandleEvent [as handleEvent] (core.js:30036)
    at dispatchEvent (core.js:19859)
    at core.js:28448

[harishajdarevic]

The problem occurs only if source and destination are array of objects. With array of strings it works as expected.

[czeckd]

Without seeing the source for your custom-listbox and the arrays of objects, it is impossible for me to guess the cause. Can you create a small reproducer in stackblitz of the problem you are having?

I am not seeing it in the demo, which uses arrays of objects.

[renanvm]

Same issue here. I'm using Angular 8.

[czeckd]

@renanvm - could you provide a small code sample that reproduces the error?

[renanvm]

`

</div>`

`export class DistribuidorRegiaoComponent implements OnInit {

regioes: any[] = []; regioesSelecionadas: any[] = [];

ngOnInit() { this.regiaoService.query().subscribe(res => { this.regioes = res.body; }); } `

It loads just the first item of the array

[czeckd]

@renanvm - in your example, what is an example of res.body?

[renanvm]

@renanvm - in your example, what is an example of res.body?

(2) [{…}, {…}] 0: {id: 1051, nome: "Norte", distribuidor: null} 1: {id: 1052, nome: "Sul", distribuidor: null} length: 2 __proto__: Array(0)

[czeckd]

@renanvm: Please change your template to be:

<dual-list key="id" display="nome"
  [source]="regioes" [height]="'300px'" [format]="format" [(destination)]="regioesSelecionadas"></dual-list>

Here is the code I used for the component:

import { Component, OnInit } from '@angular/core';
import { DualListComponent } from 'angular-dual-listbox';
import { RegiaoService } from './regiao.service';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
    format: any = DualListComponent.DEFAULT_FORMAT;
    regioes: any[] = [];
    regioesSelecionadas: any[] = [];

    constructor(private regiaoService: RegiaoService) {
    }

    ngOnInit() {
        this.regiaoService.query().subscribe(res => {
            this.regioes = res;
        });
    }
}

Here's what I used for the service:

import { Injectable } from '@angular/core';

import { BehaviorSubject, Observable, of } from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class RegiaoService {
    private regiao: any[] = [
        {id: 1051, nome: "Norte", distribuidor: null},
        {id: 1052, nome: "Sul", distribuidor: null}
    ];
    private regiaoSubj: BehaviorSubject<any>;

    constructor() {
        this.regiaoSubj = new BehaviorSubject<any>(this.regiao);
    }

    query(): Observable<any> {
        return this.regiaoSubj.asObservable();
    }
}

I'm not seeing any errors and I see Norte and Sul available to select. Either this is not the same issue @harishajdarevic saw or the reproducer is not complete enough for your use case to replicate the error or it was a simple misconfiguration not providing the key and display in your dual-list.

[renanvm]

Thanks @czeckd . Now everything is working. Really was a misconfiguration.