动态可编辑 Primeeng 表和 FormArray 中的 onRowEditInit 无法正常工作

如何解决动态可编辑 Primeeng 表和 FormArray 中的 onRowEditInit 无法正常工作

我正在尝试创建一个动态表来管理一些患者过敏症。我正在遵循以下链接 (https://stackblitz.com/edit/primeng-tableedit-demo-bt759u?file=src%2Fapp%2Fapp.component.ts) 中引用的示例。唯一的区别是我使用 FormArray 动态创建过敏行。 下面是管理我的表格视图的示例代码：

   <p-table
    [value]="medicalForm.get('allergies')['controls']"
    formArrayName="allergies"
    dataKey="id"
    editMode="row"
  >
    <ng-template pTemplate="header">
      <tr>
        <th>Allergy Type</th>
        <th>Allergy Status</th>
        <th>Allergy Degree</th>
        <th style="width: 8rem"></th>
      </tr>
    </ng-template>
    <ng-template
      pTemplate="body"
      let-allergy
      let-editing="editing"
      let-ri="rowIndex"
    >
      <tr [pEditableRow]="allergy" [formGroupName]="ri">
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <p-dropdown
                [options]="allergyTypes"
                optionLabel="designation"
                [(ngModel)]="selectedAllergyType"
                placeholder="Allergy Type "
                formControlName="type"
                [style]="{ width: '100%' }"
              ></p-dropdown>
            </ng-template>
            <ng-template pTemplate="output">
              {{ allergy.value.type.designation }}
            </ng-template>
          </p-cellEditor>
        </td>
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <p-dropdown
                [options]="allergyStatus"
                optionLabel="designation"
                placeholder="Allergy Status "
                formControlName="status"
                [(ngModel)]="selectedAllergyStatus"
                [style]="{ width: '100%' }"
              ></p-dropdown>
            </ng-template>
            <ng-template pTemplate="output">
              {{ allergy.value.status.designation }}
            </ng-template>
          </p-cellEditor>
        </td>
        <td>
          <p-cellEditor>
            <ng-template pTemplate="input">
              <p-dropdown
                [options]="allergydegrees"
                optionLabel="designation"
                [(ngModel)]="selectedAllergyDegree"
                formControlName="degree"
                placeholder="Allergy degree "
                [style]="{ width: '100%' }"
              ></p-dropdown>
            </ng-template>
            <ng-template pTemplate="output">
              {{ allergy.value.degree.designation }}
            </ng-template>
          </p-cellEditor>
        </td>
        <td style="text-align: center">
          <button
            *ngIf="!editing"
            pButton
            pRipple
            type="button"
            pInitEditableRow
            icon="pi pi-pencil"
            (click)="onRowEditinit(allergy)"
            class="p-button-rounded p-button-text"
          ></button>
          <button
            *ngIf="editing"
            pButton
            pRipple
            type="button"
            pSaveEditableRow
            icon="pi pi-check"
            (click)="onRowEditSave(allergy)"
            class="p-button-rounded p-button-text p-button-success p-mr-2"
          ></button>
          <button
            *ngIf="editing"
            pButton
            pRipple
            type="button"
            pCancelEditableRow
            icon="pi pi-times"
            (click)="onRowEditCancel(allergy,ri)"
            class="p-button-rounded p-button-text p-button-danger"
          ></button>
        </td>
      </tr>
    </ng-template>
  </p-table>
  <button
    pButton
    pRipple
    type="button"
    icon="pi pi-plus"
    class="p-button-rounded p-button-text float-right"
    (click)="addAllergy()"
  ></button>

表格当然封装在表单 HTML 元素中，我将它绑定到名为 medicalForm 的 formGroup。下拉列表正确填充了从服务器获取的数据.下面是我在 ngOnInit 函数中调用的函数的逻辑来初始化我的表单：

  initializeform() {
this.medicalForm = this.fb.group({
  language: [""],irs: ["",Validators.required],handicaps: this.fb.array([this.createHandicap()]),allergies: this.fb.array([this.createallergyRow()]),});}

接下来是我用来管理我的表的功能：

createallergyRow() {
return this.fb.group({
  type: "",status: "",degree: "",}); }

addAllergy() {
this.allergies = this.medicalForm.get("allergies") as FormArray;
this.allergies.push(this.createallergyRow());}

 onRowEditinit(allergy) {
this.clonedAllergies[allergy.value.id] = { ...allergy }; }

onRowEditSave(allergy) {
delete this.clonedAllergies[allergy.value.id];}

onRowEditCancel(allergy,ri) {}

我遇到的问题是每当我添加一行并尝试编辑它时，所有行都会被选中，如果我更改下拉列表中的值，该值将应用于同一列。