multiple selects select the same option

Question

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;">
  <caption></caption>
  <thead style="background:#ce5e59; color: white;">
    <tr>
      <th scope="colgroup">Interventions:</th>
      <th scope="colgroup">Surface Type:</th>
      <th scope="colgroup">Price:</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let element of intervention; index as j">
      <tr>
        <td>{{element.int.code}}</td>

        <td>
          <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>
          </select>
        </td>

        <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>
      </tr>
    </ng-container>
  </tbody>
</table>

• summary.ts

intervention: Intervention[] = []
surface_type: number: 0

Answer 1

<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

value="1"

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.

Also

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

element.surface_type

Your interface Intervention should look something like this

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

}