How to data-bind an array element with Angular

Question

I am using Angular.

I have a table with two columns. Each cell of 1st column is a series number. Each cell of second column is a drop down of serial numbers. I am binding to a data source in my component and it is working fine.

My data source is a simple hard coded array in my component (I have as many elements as I like, here I show only one):

toolSeries = {
    "Series": "12345678A",
    "Serials" : ["123321", "123321", "54654", "357", "386758"],
}

and my binding is like so:

<tr *ngFor='let tools of toolSeries' height="50px">
    <td class="tableEntryText">{{tools.Series}}</td>
    <td class="tableEntryText">
        <select class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
            <option *ngFor = 'let serial of tools.Serials'>
                {{serial}}
            </option>
        </select>
    </td>
<tr>

All good, works fine.

Now I need to add the following: each Tool Serial can have a "state". So I modify my data structure like so:

toolSeries = [
  {
    "Series": "12345678A",
    "Serials" : ["199921", "123321", "54654", "357", "386758"],
    "State": ["OK","BAD","BAD","UNKNOWN", "OK"]
  },

So, I add another column to my HTML table and now my code becomes:

<tr *ngFor='let tools of toolSeries' height="50px">
    <td class="tableEntryText">{{tools.Series}}</td>
    <td class="tableEntryText">
        <select class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
            <option *ngFor = 'let serial of tools.Serials'>
                {{serial}}
            </option>
        </select>
    </td>
    <td class="tableEntryText">
        <label class="labelAdjust">{{series.State[0]}}</label>
    </td>
</tr>

Now as it stands, {{series.State[0]}} will mean that the the new field always shows the value of the first state for each serial.

Question: How should I write the binding so that the State of the field will reflect the state of the Serial selected in the drop down? So for example, when the user selects "123321" from the dropdown my new column's cell should show "BAD" instead of "OK".

Thanks for any help.

David Kidwell · Accepted Answer · 2021-08-20 16:29:40Z

There are some other considerations here but the quick and dirty way to do what you want is this,

<select [(ngModel)]="selectedValue" class="noBorder additionalSelectStyle" name="filter_for" (change)="OnSerialChanged($event.target)">
    <option *ngFor = 'let serial of tools.Serials' [ngValue]="serial">
        {{serial}}
    </option>
</select>

<td class="tableEntryText">
    <label class="labelAdjust">{{tools.State[tools.Serials.indexOf(selectedValue)]}}</label>
</td>

You have to bind a value to your select so that you know what the selected option is and then you need to find the index of that value in the tools.Serials array and use that index in tools.State to get the corresponding state. You will also need to declare the selectedValue variable in your .ts file,

public selectedValue: number;

Keep in mind this assumes that tools.Serials and tools.State have the same number of elements. If they ever become out of sync you will likely have errors.

The better solution is likely to rethink your data structure and associate the states with their serials in a more direct way.

Amnah Razzaki · Accepted Answer · 2021-08-20 18:27:05Z

Stackblitz

My approach is quite similar to @DKidwell answer here, but instead of saving and looking up the value of selected tool.serial. I'm saving the index of selected tool.serial in ngModel & retrieving the tool.State value on same index if exists else there is no error and no value in tool.State. So, even if the length of these arrays mismatched your code will work, but still probably its a good idea to rethink your data structure if this is going to be get more complex.

<select class="noBorder additionalSelectStyle" name="filter_for" [(ngModel)]="selectedSerial">
  <option value="" disabled>Select a  serial</option>
  <option *ngFor = 'let serial of tools?.Serials; let i = index' [value]="i">
    {{serial}}
</option>
</select>
  </td>
  <td class="tableEntryText">
      <label class="labelAdjust">{{(tools?.State[selectedSerial]) ||  ''}} </label>
  </td>
</tr>

user3738290 · Accepted Answer · 2021-08-23 10:22:16Z

0

Thank you both very much for taking the time to answer, I very much appreciate it. Your answers taught me a lot. In the end I did indeed change the data structure to one which enabled me to use less data-binding code.

answered Aug 23, 2021 at 10:22

user3738290

4556 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to data-bind an array element with Angular

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related