primeng - p-table 動的行の p-dropdown PrimeNG - バージョン 9 - Stackblitz が追加されました

Question

私の要件は、以下のようにグリッドの 2 列の各行にドロップダウンを配置することです。

これが私の問題の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>

およびコンポーネント（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" }]