'How can I have a different ngModel for each row of a data table dropdown?

The following is my HTML.

        <tr>
            <th>
                Test Data
            </th>
            <th>
                Test Data Options
            </th>
        </tr>

        <tr>
            <td>
                <ng-container>
                   {{data.testData}}
                </ng-container>
            </td>
            <td class="text-base font-normal">
                <ng-container>
                    <p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue" placeholder="Select Test Data"></p-dropdown>
                </ng-container>
            </td>
        </tr>

This is my JSON file.

“data”: [ 
          { 
            “testData”: “Test Data A”, 
            “testDataOptions”: [ 
                                 {  
                                   “testDataOptionValue”: “Test Data A1 Option”,     
                                   “testDataOptionLabel”: “Test Data A1” 
                                 }, 
                                 {  
                                   “testDataOptionValue”: “Test Data A2 Option”,     
                                   “testDataOptionLabel”: “Test Data A2” 
                                 } 
                               ], 
          }, 
          { 
            “testData”: “Test Data B”,
            “testDataOptions”: [ 
                                 {  
                                   “testDataOptionValue”: “Test Data B1 Option”,    
                                   “testDataOptionLabel”: “Test Data B1” 
                                 }, 
                                 {  
                                   “testDataOptionValue”: “Test Data B2 Option”,    
                                   “testDataOptionLabel”: “Test Data B2” 
                                 } 
                               ], 
          }

enter image description here

If I want to save the selected values of the value of each dropdown in each of the row what should I be doing?

For example

I would want to save the selected options into an array and pass it into a JSON in the following.

Selected option value for row 1: Test Data A1 Option

Selected option value for row 2: Test Data B2 Option

"selectedOptions": [
  {
   "selectedValue": "Test Data A1 Option"
  },
  {
   "selectedValue": "Test Data B2 Option"
  }
]


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source