How can I populate the dropdown values for each row within a data table?-CodePudding

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 >
                    <ng-container>
                        <p-dropdown [options]="dropdownOptions" 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” 
                                 } 
                               ], 
          }

How could I populate the dropdown values in each row in the data table according to their indexes?

For example

The Test Data A row dropdown values should be: Test Data A1, Test Data A2

The Test Data B row dropdown values should be: Test Data B1, Test Data B2

CodePudding user response：

I guess you're missing a *ngFor in the code snippet you sent:

<tr *ngFor="let data of json.data">
  <td>{{ data.testData }}</td>
  <td>
    <p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue"></p-dropdown>
  </td>
</tr>

CodePudding user response：

Allan gave you the correct answer, I'm just going to expand it a bit. Since your dropdown options list might be a large one, please consider using trackBy as well. It is not mandatory and it does not always prove much more performant, but overall it should help with performance. You can do it like so:

<tr *ngFor="let data of json.data; trackBy: trackByMethod">
  <td>{{ data.testData }}</td>
  <td>
    <p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue"></p-dropdown>
  </td>
</tr>

While in your .ts file (make sure you add some IDs to your items as well - or use other unique identifiers):

trackByMethod = (index: number, item: any): string => item.id;

You can read more about trackBy here: https://dev.to/rfornal/angular-is-trackby-necessary-with-ngfor-594e