CODEWITHSUNDEEP
angularng2-smart-table
Kasper
Kasper

Reputation: 690

ng2-smart-table update list dynamically

I have an ngx-form-settings and a dropdown object in a column. This dropdown should be populated by a query (through a service call).

This is the settings:

site: {
title: 'SITE',
    type: 'html',
            editor: {
              type: 'list',
              config: {
                list: [],
              },
            }
          },

if I do this, it works (of curse this is not what I need as the setList must be into the getData.subscribe): 

  ngOnInit() {
    this.service.getData().subscribe((data: any) => {
    });
    this.setList();
  }

if I do this, it doesn't work:

  ngOnInit() {
    this.service.getData().subscribe((data: any) => {
        this.setList();
    });
  }

where set list is just this (for now): 

  setList() {
    this.settings.columns.site.editor.config.list = [{ value: 'Option 1', title: 'Option 1' },
            { value: 'Option 2', title: 'Option 2' },
            { value: 'Option 3', title: 'Option 3' },
            { value: 'Option 4', title: 'Option 4' },
            { value: 'Option 5', title: 'Option 5' },
            { value: 'Option 6', title: 'Option 6' },
    ];
  }

what am I missing?

Upvotes: 2

Views: 3803

Answers (1)

Kasper
Kasper

Reputation: 690

I was able to figure this out,

The ngOnInit is called and set settings. Point is that the subscribe (in the case that doesn't work) return immediately and the ngOnInit cannot initialize the list. "Settings" is not dynamically updated, so to speak. A workaround I've found is this:

ngOnInit() {
    this.service.getData().subscribe((data: any) => {
    this.settings.columns.site.editor.config.list = [
        { value: 'Option 1', title: 'Option 1' },
        { value: 'Option 2', title: 'Option 2' },
        { value: 'Option 3', title: 'Option 3' },
        { value: 'Option 4', title: 'Option 4' },
        { value: 'Option 5', title: 'Option 5' },
        { value: 'Option 6', title: 'Option 6' }];
    });
    this.settings = Object.assign({}, this.settings);
}

when the service returns and executes the subscribed method the only chance is to reload the whole Settings structure.

this.settings = Object.assign({}, this.settings);

Upvotes: 8

Related Questions