Мое требование - иметь раскрывающиеся списки в каждой строке из двух столбцов сетки, как показано ниже:
Вот stackblitz для моей проблемы: https://stackblitz.com/edit/angular9-primeng9
Пользователь может выбрать значения для каждой строки и сохранить. Я могу получать данные из источника данных с помощью службы и инициализировать параметры раскрывающегося списка в подписке на наблюдаемые. Однако я не могу настроить выбранный элемент каждой строки при загрузке страницы для отображения ранее существовавших строк (я думаю, проблема с настройкой [(ngModel)]).
Кроме того, мне нужно добавить кнопку «плюс», которая добавит новую строку в эту таблицу, и результат должен быть сохранен в базе данных при сохранении действия. Любые указания / рекомендации по решению этой проблемы будут большим подспорьем.
Ниже приведен HTML-код, который я использую:
<p-table [columns]="cols" [value]="rows">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td>
<p-dropdown [options]="DropdownSource" [(ngModel)]="rowData.AAttribute" placeholder="Select"
[showClear]="true"></p-dropdown>
</td>
<td>
<p-dropdown [options]="DropdownSource" [(ngModel)]="rowData.BAttribute" placeholder="Select"
[showClear]="true"></p-dropdown>
</td>
</tr>
</ng-template>
</p-table>
и в компоненте (подписаться на изменения):
this.cols = [
{ "field": "field_0", "header": "A Attribute" },
{ "field": "field_1", "header": "B Attribute" }
];
this.rows = [{ "AAttribute": "Data3", "BAttribute": "DataC" },
{ "AAttribute": "Data5", "BAttribute": "DataE" }];
this.DropdownSource= [
{ "AAttribute": "Data1", "BAttribute": "DataA" },
{ "AAttribute": "Data2", "BAttribute": "DataB" },
{ "AAttribute": "Data3", "BAttribute": "DataC" },
{ "AAttribute": "Data4", "BAttribute": "DataD" },
{ "AAttribute": "Data5", "BAttribute": "DataE" },
{ "AAttribute": "Data6", "BAttribute": "DataF" }]