Angular ng-select in two *ngFor-CodePudding

enter image description hereI have a problem when inserting dynamic ng-select in a table ,

when I select one dropdown the next one takes the same value and I couldn't find where is the probleme ? Any one can help me please ? (https://i.stack.imgur.com/Af33N.png)

<ng-container *ngFor="let label of natureSaisie; index as i">
            <tr>
                <td>{{label.NO_DPTG}}</td>
                <td >{{label.LIB_DPTG}}</td>
                <td  *ngFor="let val of label.LIB_VALEUR ;let index = index;">
                    <ng-select  notFoundText="{{ 'lg_liste_vide' | translatePipe }}"  
                    [searchable]="false" [(ngModel)]="label.LIB_VALEUR[index]" id="index"       [items]="natures" [clearable]="false" 
                    bindValue="index"
                    bindLabel="val"
                    (change)="selectMetier($event,label.NO_DPTG)" >
                    </ng-select>
                </td>           
            </tr>
</ng-container>

CodePudding user response：

I think you can change the bindValue and id and this will solve your problem

CodePudding user response：

<ng-container *ngFor="let label of natureSaisie"> <--- removed
            <tr>
                <td>{{label.NO_DPTG}}</td>
                <td >{{label.LIB_DPTG}}</td>
                <td  *ngFor="let val of label.LIB_VALEUR ;let i = index;"> <--- renamed to i
                    <ng-select  notFoundText="{{ 'lg_liste_vide' | translatePipe }}"  
                    [searchable]="false" [(ngModel)]="label.LIB_VALEUR[i]" id="index"       [items]="natures" [clearable]="false" 
                    bindValue="index"
                    bindLabel="val"
                    (change)="selectMetier($event,label.NO_DPTG)" >
                    </ng-select>
                </td>           
            </tr>
</ng-container>

Try this. It might be because you have two variables named index. One in the first ngFor level, another one in the next.

Also, you are sending an object as a string in bindValue and bindLabel. I feel you misunderstood those input bindings' usage.