Dropdown inside Datatable won't 'pre-select' binded option [PrimeNG]

Question

I hope you're doing fine. Trainee here, just starting with frontend development, so sorry if the question is dumb, or the code looks awful (any correction is very welcomed).

I have a Dropdown element inside a Datatable:

<p-dataTable [value]="Items">
    <p-column field="Destination" header="Destinos">
        <ng-template let-col let-item="rowData" pTemplate="body">
            <p-dropdown [ngModelOptions]="{standalone: true}" [(ngModel)]="item[col.field]" appendTo="body" [options]="Destinations">
            </p-dropdown>
        </ng-template>
    </p-column>

    <!-- more columns-->

</p-dataTable>

Destinations are loaded here:

    this.destinationService.getDestinations().
        subscribe((res: Array<Destination>) => {
            res.forEach(element => {
                this.Destinations.push({ label: element.Name, value: element.id });
            });
        });

when pressing a submit button, it generates a JSON. And this "Creation" template works like a charm. Object saved is an estimate, and estimate.Provider has a correct attribute value, which is a number, taken from select/option 'value', so I think binding works perfect here.

But when I load this mentioned estimate in a "EDIT" template, everything loads perfect except Destinations dropdown, because it hasn't nothing selected.

I mean, if estimate.Provider is 2, shouldn't it 'auto-select' option whose 'Value' would be 2? at least, that's how a native dropdown works (I checked if the value is loading correctly, just in case, and it does). Furthermore, I believe empty value as default is strange, because primeng dropdown selects the first value loaded in the dropdown by default. Then, if I click it, it works perfectly; displays the options as it should do.

So I believe something weird is happening and I'm missing something important.

I don't know what to do. Thanks in advance

Leandro Alí Elel Leandro Alí Elel · Accepted Answer · 2017-05-31T13:40:21

My problem was that I was working with a parent and child component, and the 'datasource' of Datatable (which was in the Child Component) was taking its value from the Parent Component through an Input(), problem was that the service which loaded Destinations from DB executed after Input and not before, so the template rendered datatable when Destinations was empty. I fixed it 'sending' Destinations from parent to child instead of loading it in child.

Hope it helps.

Dropdown inside Datatable won't 'pre-select' binded option [PrimeNG]

1 Answers