如何填充数据 table 中每一行的下拉值？

Question

以下是我的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>

这是我的 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” 
                                 } 
                               ], 
          }

如何根据索引在数据 table 的每一行中填充下拉值？

例如

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

Answer 1

我猜想您发送的代码片段中缺少一个*ngFor：

<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>

编辑：绑定所选值

第一个选项是绑定到您已经拥有的数据对象，尽管它可能会根据上下文感觉很老套。例如：

<p-dropdown [options]="data.testDataOptions" optionLabel="testDataOptionLabel" optionValue="testDataOptionValue" [(ngModel)]="data.selectedValue"></p-dropdown>

如果这感觉很奇怪或者您只是不想弄乱这些数据，那么您需要将它存储在一个单独的变量中，该变量可以是数组或 key/value 结构。然后你只需将每个项目绑定到数据结构中的相应条目。

Answer 2

艾伦给了你正确的答案，我只是稍微扩展一下。由于您的下拉选项列表可能很大，请考虑使用 trackBy。它不是强制性的，并不总是证明性能更高，但总的来说它应该有助于提高性能。你可以这样做：

<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>

在您的 .ts 文件中（确保您也为您的项目添加一些 ID - 或使用其他唯一标识符）：

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

您可以在此处阅读有关 trackBy 的更多信息：https://dev.to/rfornal/angular-is-trackby-necessary-with-ngfor-594e

如何填充数据 table 中每一行的下拉值？

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

html

javascript

typescript

primeng

angular