[Fixed] multiple selects select the same option


In my project, i have a table where various interventions are inserted based on previous selections. In case of more interventions, on the select if I go to select a value on the first intervention, it will also change on the second intervention. How can I make selections independent?

  • summary.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<table class="table table-hover table-bordered table-striped" style="display: contents;">
  <thead style="background:#ce5e59; color: white;">
      <th scope="colgroup">Interventions:</th>
      <th scope="colgroup">Surface Type:</th>
      <th scope="colgroup">Price:</th>
    <ng-container *ngFor="let element of intervention; index as j">

          <select multiple [(ngModel)]="surface_type">
            <option selected disabled [value]="0">Select</option>
            <option [value]="1" [attr.disabled]="element.priceVis === 0 ? 'disabled' : null">Visible Surface</option>
            <option [value]="2" [attr.disabled]="element.pricePlast === 0 ? 'disabled' : null">Plastered Surface</option>
            <option [value]="3" [attr.disabled]="element.priceBoth === 0 ? 'disabled' : null">Both Surface</option>

        <td *ngIf="surface_type == 0"></td>
        <td *ngIf="surface_type == 1">{{element.priceVis}}€/{{element.unit}}</td>
        <td *ngIf="surface_type == 2">{{element.pricePlast}€/{{element.unit}}</td>
        <td *ngIf="surface_type == 3">{{element.priceBoth}}€/{{elemento.unit}}</td>
  • summary.ts
intervention: Intervention[] = []
surface_type: number: 0


<option [value]="1" [attr.disabled]="element.priceVis === 0 ? 'disabled' : null">Visible Surface</option>

[] as an attribute will be a one way binding of data with the variable that comes inside the ""

so, for your case [value]="1" means you are assigning a variable 1 to the value attribute, and not the value 1 to value attribute.

for that to happen, you have to write as


so finally, your code should look like

<option value="1" [attr.disabled]="element.priceVis === 0 ? 'disabled' : null">Visible Surface</option>

You will have to make the similar changes on all the option tags to make this work.

Please check the docs of angular’s property binding for more details.


For the variable surface_type is the same for all the loops. so you will either have to change that to an array just like what Erik commented. or you will have to keep a variable surface_type on each of the object inisde intervention array. and replace every insance to


Your interface Intervention should look something like this

interface Intervention {
   ... your objects ...
   surface_type: number|string


Leave a Reply

(*) Required, Your email will not be published