How to set for multiple dropdowns an already selected value in angular-CodePudding

So I have an object coming from the backend that looks something like this

[
 {key: '1', value: 'OK'},
 {key: '2', value: 'NOT OK'},
 {key: '3', value: 'NOT OK'},
 {key: '4', value: 'NOT OK'},
 {key: '5', value: 'NOT OK'}
]

I have an html template like this

<table style="width:100%" *ngIf="show">
            <tr>
                <th>Day Counter</th>
                <td *ngFor="let obj of objectToArrayOfObjects">{{obj.key}}</td>
            </tr>
            <tr>
                <th>Status</th>
                <td *ngFor="let i of nrOfInputsArr" >
                        <mat-form-field style="width: 35px; height: 15px"
                                        appearance="outline" >
                                <mat-label></mat-label>


                                <mat-select
                                        [(ngModel)]="theKeysOfTheObjToArrayOfObjects"
                                        style="width:35px">
                                                 <mat-option
                                                         *ngFor="let options of statusOptions"
                                                         [value] = 'options'
                                                         (click)="AddToArray(options, i)">
                                                     {{options.value}}
                                                 </mat-option>
                                            </mat-select>
                        </mat-form-field>
                </td>
             </tr>
    </table>

And A typescript file like this :

    statusOptions = [
        { value :     'OK'},
        { value : 'NOT OK'},
    ]

      showDaysOfSustainabilityCheck() {
                console.log(this.data.processedDays)
                console.log(this.objectToArrayOfObjects,'iterate');
                console.log(this.theValuesOfTheObjToArrayOfObjects,'2iterate')
                this.isDaysOfSustainabilityCheckNeeded = !this.isDaysOfSustainabilityCheckNeeded;
                this.data.sustainableActionRequired = true;
      }


 /*
//console.log(this.data.processedDays);
{
    "1": "OK",
    "2": "NOT OK",
    "3": "NOT OK",
    "4": "NOT OK",
    "5": "NOT OK"
}
//console.log(this.objectToArrayOfObjects); 

[
 {key: '1', value: 'OK'},
 {key: '2', value: 'NOT OK'},
 {key: '3', value: 'NOT OK'},
 {key: '4', value: 'NOT OK'},
 {key: '5', value: 'NOT OK'}
]

//console.log(this.theValuesOfTheObjToArrayOfObjects);
['OK', 'NOT OK', 'NOT OK', 'NOT OK', 'NOT OK'] 
*/

What exactly is happening?

When a user selects yes or no from the table, the data is processed and saved in the back end. My goal is that when a specific post that I have already done is activated. What I want is for the yes or no answers to remain selected when we open the respective ticket that the user created.

Based on an input, a number of dropdowns are opened, all of which have a yes or no answer.

So my problem is that when I make the call from the backend, these answers that were later selected, are not saved in the dropdown

I hope that makes sense

CodePudding user response：

I have created this simple example on Stackblitz for you with fake backend service call. If you have any additional questions about Angular lifecycle hooks and data processing, please use comments section.

If it is not working for you. Im adding the code also here.

Template

<table *ngIf="showTable" style="width:100%; padding: 30px;">
  <tr>
    <th>Day Counter</th>
    <td style="text-align: center;" *ngFor="let key of dataKeys">
      {{ key }}
    </td>
  </tr>
  <tr>
    <th>Status</th>
    <td *ngFor="let entry of currentData">
      <mat-form-field style="width: 120px;" appearance="outline">
        <mat-label></mat-label>
        <mat-select
          [(value)]="entry.value"
          (selectionChange)="onSelectionChange()"
        >
          <mat-option
            [value]="status.value"
            *ngFor="let status of availableStatuses"
          >
            {{ status.value }}
          </mat-option>
        </mat-select>
      </mat-form-field>
    </td>
  </tr>
</table>

Component data

enum Status {
  OK = 'OK',
  NOK = 'NOT OK',
}

interface EntryStatus {
  value: Status;
  viewValue?: string;
}

interface DataEntry {
  key: string;
  value: Status;
}

  showTable = true;

  currentData: DataEntry[] = [
    { key: '1', value: Status.OK },
    { key: '2', value: Status.NOK },
    { key: '3', value: Status.NOK },
    { key: '4', value: Status.NOK },
    { key: '5', value: Status.NOK },
  ];

  dataKeys = this.currentData.map((entry) => entry.key);

  availableStatuses: EntryStatus[] = [
    { value: Status.OK },
    { value: Status.NOK },
  ];

CodePudding user response：

NOT use (click) in options. use [(ngModel)]="obj.value"

<div *ngFor="let obj of objectToArrayOfObjects">
  {{obj.key}}
  <!--see that the variable you want "binding" are
            obj.value
  -->
  <mat-select [(ngModel)]="obj.value">
      <mat-option *ngFor="let options of statusOptions"
        [value] = 'options'>
           {{options.value}}
      </mat-option>
  </mat-select>
</div>

Just to check the values:
<pre>
 {{objectToArrayOfObjects|json}}
</pre>

Now in submit you send the objectToArrayOfObject to the service than change the dbs