CODEWITHSUNDEEP
angularangular2-template
Cyrille Mortier
Cyrille Mortier

Reputation: 61

angular2 *ngfor and nested observable

Got an issue with nested observable :

I manage to have the right number of plan, btw all the wariable are well setup, i can see in the console that the number of status is growing up...
but the combo box is empty what am i doing wrong ?

Here is a snippet of the code i have in my template : 

<tr *ngFor="let plan of plans$ | async">
    <td><input type="text" [(ngModel)]="plan.libelle"/></td>
    <td>
        <select>
            <option *ngFor="let statut of statuts$ | async"
                    ngValue="{{statut.id}}"
                    [selected]="statut.id == plan.statut.id">
                {{statut.libelle}}
            </option>
        </select>
    </td>
</tr>

an other one in my component :

private plans$:Observable<Array<Plan>>;
private statuts$:Observable<Array<Param>>;

constructor(private planService:PlanService, private paramService:ParamService) {}

ngOnInit() {
    this.statuts$ = this.paramService.typesPlan$; //return the observable from the service
    this.plans$ = this.planService.plans$; //same thing
    this.paramService.loadAll('plan'); //this load all the status in an async way.
    this.planService.loadAll(); //the same as above and it work.
}

the result i have is a table whith my plans but on the same line the combo is empty : there is no choice in the combo (the async isn't working ?) it seems like the template is not updated when the status$ is updated

Thank's for helping!

Upvotes: 4

Views: 1280

Answers (2)

Cyrille Mortier
Cyrille Mortier

Reputation: 61

i solve my issue by modifying the templete and the component :

<tr *ngFor="let plan of plans$ | async">
<td><input type="text" [(ngModel)]="plan.libelle"/></td>
<td>
    <select>
        <option *ngFor="let statut of statuts"
                ngValue="{{statut.id}}"
                [selected]="statut.id == plan.statut.id">
            {{statut.libelle}}
        </option>
    </select>
</td>

and the component :

private plans$:Observable<Array<Plan>>;
private statuts:Array<Param>;

constructor(private planService:PlanService, private paramService:ParamService) {}

ngOnInit() {
    this.paramService.typesPlan$.suscribe((status)=> this.status = status); 
    this.plans$ = this.planService.plans$; 
    this.paramService.loadAll('plan'); //this load all the status in an async way.
    this.planService.loadAll(); //the same as above and it work.
}

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658067

I think this is what you want:

        <option *ngFor="let statut of statuts$ | async"
                [(ngValue)]="statut.id">
            {{statut.libelle}}
        </option>

or

        <option *ngFor="let statut of statuts$ | async"
                [ngValue]="plan.statut.id"
                (ngValueChange)="status.id = $event">
            {{statut.libelle}}
        </option>

Upvotes: 0

Related Questions