0
216
ViewsHow can I populate the dropdown values for each row within a data table?
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]="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
2 answers
Answer question0
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>
Edit: binding the selected value
A first option, although it might feel hacky depending on context, is to bind to the data object you already have. For instance:
<p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue" [(ngModel)]="data.selectedValue"></p-dropdown>
If that feels weird or you just don't want to mess with that data, then you'll need to store it in a separate variable, which can be an array or a key/value structure. Then you just bind each item to the corresponding entry in the the data structure.
0
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