Typescript: How to update select when object has changed

Question

I have this html code:

<tr>
    <td><label>G Level 3</label></td>
    <td><select [ngModel]="selectedG3" (ngModelChange)="selectG3Changed($event)">
          <option></option>
          <option *ngFor="let g3 of gLevels3" [ngValue]="g3">{{g3.name}}</option>
        </select>
    </td>
</tr>

This is my ts-code:

gLevels3: GLevel[];
getGLevels3(): void {
   this.httpServerService.getGLevels(3).subscribe(glevel3 => this.gLevels3 = glevel3);
}

gLevels3 is an Array with Objects. I want to update the options of select every time I call the function getGLevels3().

Currently it is not working. After calling the function there are still the same options inside the select.

How can I trigger the update?

Have you looked at https://stackoverflow.com/questions/33181936/how-to-use-select-option-ngfor-on-an-array-of-objects-in-angular2? — GetFuzzy, Aug 06 '18 at 13:09
@GetFuzzy no, but thanks. I wanted to make it easier for you to understand. actually it is working for select as I just got to know but not for a table with dynamic tablerows — flyingAlemannian, Aug 06 '18 at 13:11
Dynamic table rows sounds like you probably have a different binding problem. Might be worth a new question. — GetFuzzy, Aug 06 '18 at 13:14
@GetFuzzy my problem is like this here: https://github.com/angular/angular/issues/15511 but not that I get an error. It is just not updating the table. — flyingAlemannian, Aug 06 '18 at 13:50
@GetFuzzy Actually I am getting closer. It is also not possible for select's. I send an object to another components function where I push the new object into the object-array. So far so good, it works. But there won't happen anything to neither the select nor the table. — flyingAlemannian, Aug 06 '18 at 14:35
I have started a new question: https://stackoverflow.com/questions/51710175/typescript-how-to-update-table-with-dynamic-tablerows-when-object-has-changed — flyingAlemannian, Aug 06 '18 at 14:41

score 0 · Answer 1 · answered Aug 06 '18 at 13:13

I'm not sure if you have eliminated all other possibilities... Offhand your code looks correct. We have the same type of situation in a code base I work on. We have a filtering select options situation, and it is updating just fine.

        <select class="tool-controls__select" style="margin-right: 4px;" *ngIf="selectFilterOptions.length > 0 && chartIdsDefined" [(ngModel)]="selectedFilterOption" (change)="selectFilterOptionOnChange()">
            <option [ngValue]="filterItem" *ngFor="let filterItem of selectFilterOptions">{{filterItem}}</option>
        </select>
        <select class="tool-controls__select" [(ngModel)]="selectedOption" (change)="selectOnChange()">
            <option [ngValue]="item" *ngFor="let item of selectOptions">{{item.name}}</option>
        </select>

Typescript: How to update select when object has changed

1 Answers1