p-table 动态行中的 p-dropdown PrimeNG - 版本 9 - 添加 Stackblitz

Question

我的要求是在网格的两列的每一行中都有下拉菜单，如下所示：

这是针对我的问题的 stackblitz：https://stackblitz.com/edit/angular9-primeng9

用户可以 select 每行的值并保存。我能够使用服务从数据源获取数据，并在订阅可观察对象时初始化下拉选项。但是，我无法在页面加载时设置每行的 selected 项目以显示预先存在的行（我认为设置 [(ngModel)] 的问题）。

此外，我需要添加一个加号按钮，它会向此 table 添加一个新行，结果应在保存操作时保存到数据库中。解决此问题的任何指导/线索都会有很大帮助。

下面是我正在使用的 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>

在组件中（订阅 onchanges）：

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" }]

Answer 1

ngmodel 需要数组中的对象。

参考下面的 stackblitz https://stackblitz.com/edit/angular9-primeng9-dgxsjj

this.mappingRows = [{ "targetCol": "DataF", "SourceCol": this.sourceAttributes.find(p=>p.label === "Data3") },
              { "targetCol": this.targetAttributes[3], "SourceCol": "Data6" },
              { "targetCol": "DataC", "SourceCol": "Data1" }];

p-table 动态行中的 p-dropdown PrimeNG - 版本 9 - 添加 Stackblitz

p-dropdown in p-table dynamic rows PrimeNG - version 9 - Stackblitz added

primeng

primeng-dropdowns

primeng-turbotable

angular9

p-table