0
223
Views¿Cómo puedo completar los valores desplegables para cada fila dentro de una tabla de datos?
El siguiente es mi 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>Este es mi archivo JSON.
“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” } ], }¿Cómo podría completar los valores desplegables en cada fila de la tabla de datos según sus índices?
Por ejemplo
Los valores desplegables de la fila Datos de prueba A deben ser: Datos de prueba A1, Datos de prueba A2
Los valores desplegables de la fila Datos de prueba B deben ser: Datos de prueba B1, Datos de prueba B2
2 answers
Answer question0
Supongo que te falta un *ngFor en el fragmento de código que enviaste:
<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>Editar: enlazar el valor seleccionado
Una primera opción, aunque puede parecer extraño según el contexto, es enlazar con el objeto de datos que ya tiene. Por ejemplo:
<p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue" [(ngModel)]="data.selectedValue"></p-dropdown>Si eso se siente extraño o simplemente no quiere meterse con esos datos, entonces deberá almacenarlos en una variable separada, que puede ser una matriz o una estructura de clave/valor. Luego, simplemente vincula cada elemento a la entrada correspondiente en la estructura de datos.
0
Allan te dio la respuesta correcta, solo voy a ampliarla un poco. Dado que su lista de opciones desplegable puede ser grande, considere usar trackBy también. No es obligatorio y no siempre demuestra mucho más rendimiento, pero en general debería ayudar con el rendimiento. Puedes hacerlo así:
<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> Mientras esté en su archivo .ts (asegúrese de agregar algunas ID a sus artículos también, o use otros identificadores únicos):
trackByMethod = (index: number, item: any): string => item.id; Puede leer más sobre trackBy aquí: https://dev.to/rfornal/angular-is-trackby-necessary-with-ngfor-594e