将 *ngFor 创建的输入字段复制到外部模式中的输入字段

Question

我想构建一个弹出式模态编辑表单来更改动态网格中的各个表值。现在，输入字段出现在使用函数editToggle（i）单击按钮时。不会出现超过 4 个输入字段，因为它们旨在编辑我的数据模型中的 4 个值。但是，输入字段（和值）是使用 *ngFor 动态生成的。我需要一些方法将这些输入字段传递/复制到我的模式以在那里编辑而不是在网格本身上（单击编辑按钮后它们当前出现的位置）。

我曾尝试使用 [(ngModel)] 进行克隆，但它不起作用。我尝试使用函数传递它们，但值返回 null。因为 HTML 只显示一个输入字段（因为它们是使用 *ngFor 动态创建的），所以我不知道单独传递值的方法。

<div>
  <table align="center">
    <tr>
      <th>
        List of Providers
      </th>
    </tr>
  </table>
  <table id="thetable" align="center">
    <tr>
      <th>Application ID</th>
      <th>Client Name</th>
      <th>Version</th>
      <th>API Key</th>
      <th>Protected Secret</th>
      <th>EDIT/DELETE</th>
    </tr>
    <tr ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
      <td *ngFor="let col of columns">
        <span class="field" *ngIf="i !== index">
          {{prov[col]}}
        </span>
        <span *ngIf="i === index">
          <input [(ngModel)]="inputClientName" class="table" value="{{prov[col]}}" (change)="EditItem(i, col, $event.target.value)" type="text" placeholder="{{prov[col]}}">      
        </span>
      <td>
        <span *ngIf="editing && i === index">
          <button (click)="save()">Save</button>
        </span>
        <span *ngIf="i !== index">
          <button class="edit" name="editButton" (click)="editToggle(i); openEditForm()">/</button>
          <button class="delete" (click)="deleteRow(i)">x</button>
        </span>
      </td>
    </tr>
  </table>

<!-- The EDITING Modal -->
<div id="editForm" class="modal_edit">
    <div class="modal-content_edit">
      <span (click)="save()" class="close">&times;</span>
      <h2 style="margin-bottom: 70px">Edit OAuthAppProvider</h2>
      <div>
        <label style="margin-bottom: 20px">
          Client Name:
        </label>
        <input [(ngModel)]="inputClientName" id="editClientName" type="text">
      </div>

      <div>
        <label style="margin-bottom: 20px">
          Version
        </label>
        <input id="editClientVersion" type="text">
      </div>

      <div>
        <label style="margin-bottom: 20px">
          API Key:
        </label>
        <input id="editClientAPIKey" type="text">
      </div>

      <div>
        <label style="margin-bottom: 20px">
          Protected Secret
        </label>
        <input id="editClientProtectedSecret" type="text">
      </div>

      <button style="float: right" class="add" (click)="save()">
        <h4 style="font-style: bold">Save</h4>
      </button>
      <button class="cancel" (click)="save()">
        <h4 style="font-style: bold">Cancel</h4>
      </button>
    </div>
  </div>

</div>

export const PROVIDERS: any[] = 
[
    {
        AppID: "11",
        ClientName: "sampleclientname1",
        apiKey: "sampleapikey1",
        Version: "1.0",
        protectedsecret: "samplesecret1"
    },
    {
        AppID: "12",
        ClientName: "sampleclientname2",
        apiKey: "sampleapikey2",
        Version: "1.0",
        protectedsecret: "samplesecret2"
    },
    {
        AppID: "13",
        ClientName: "sampleclientname3",
        apiKey: "sampleapikey3",
        Version: "1.0",
        protectedsecret: "samplesecret3"
    },
    {
        AppID: "14",
        ClientName: "sampleclientname4",
        apiKey: "sampleapikey4",
        Version: "1.0",
        protectedsecret: "samplesecret4"
    }
]

Answer 1

您可以设置一个名为selectedRowData 的变量，并在用户单击编辑按钮时将提供程序设置为其值。模态框上输入的value 属性可以设置为所选行的属性。如果没有组件代码，很难说出其他方法的功能应该是什么，所以我做了一些假设。如果您对此有任何其他问题，请告诉我。

这是StackBlitz的链接。

编辑

数据仅通过[value] 属性以一种方式绑定，并且没有像使用Reactive Forms 那样跟踪所有更改的表单对象，因此应首先创建模型。

我注释掉了原始解决方案并在下面添加了更新。 selectedRowData 变量使用具有空属性的 provider 对象进行实例化。模式已更新为使用[(ngModel)] 的双向绑定。 StackBlitz 也已更新。

当用户在表单中输入他们的编辑内容时，表格会更新。除非需要将数据保存在某个地方，否则不需要使用保存按钮。

查看Angular Forms Documentation，它应该有助于在组件之间传递表单数据。您在此处创建的内容类似于Template-driven Forms。

组件

// selectedRowData = null;
selectedRowData = {
    AppID: "",
    ClientName: "",
    apiKey: "",
    Version: "",
    protectedsecret: ""
};

editToggle(rowData) {
  this.selectedRowData = rowData;
}

表格

<div>
  <table align="center">
    <tr>
      <th>
        List of Providers
      </th>
    </tr>
  </table>
  <table id="thetable" align="center">
    <tr>
      <th>Application ID</th>
      <th>Client Name</th>
      <th>Version</th>
      <th>API Key</th>
      <th>Protected Secret</th>
      <th>EDIT/DELETE</th>
    </tr>
    <tr ng-app="tblRowApp" *ngFor="let prov of providers; let i = index">
      <td *ngFor="let col of columns">
        <span class="field" *ngIf="i !== index">
          {{prov[col]}}
        </span>
        <span *ngIf="i === index">
          <input [(ngModel)]="inputClientName" class="table" value="{{prov[col]}}"
          (change)="EditItem(value)" type="text" placeholder="{{prov[col]}}">      
        </span>
      <td>
        <span *ngIf="editing && i === index">
          <button (click)="save()">Save</button>
        </span>
        <span *ngIf="i !== index">
          <button class="edit" name="editButton" (click)="editToggle(prov); openEditForm()">/</button>
          <button class="delete" (click)="deleteRow(i)">x</button>
        </span>
      </td>
    </tr>
  </table>

模态

<!-- The EDITING Modal -->
<div id="editForm" class="modal_edit">
    <div class="modal-content_edit">
      <span (click)="save()" class="close">&times;</span>
      <h2 style="margin-bottom: 70px">Edit OAuthAppProvider</h2>
      <div>
        <label style="margin-bottom: 20px">
          Client Name:
        </label>
        <!-- <input id="editClientName" type="text" [value]="selectedRowData?.ClientName"> -->
        <input id="editClientName" type="text" [(ngModel)]="selectedRowData.ClientName">
      </div>

      <div>
        <label style="margin-bottom: 20px">
          Version
        </label>
        <!-- <input id="editClientVersion" type="text" [value]="selectedRowData?.Version"> -->
        <input id="editClientVersion" type="text" [(ngModel)]="selectedRowData.Version">
  </div>
      </div>

      <div>
        <label style="margin-bottom: 20px">
          API Key:
        </label>
        <!-- <input id="editClientAPIKey" type="text" [value]="selectedRowData?.apiKey"> -->
        <input id="editClientAPIKey" type="text" [(ngModel)]="selectedRowData.apiKey">
      </div>

      <div>
        <label style="margin-bottom: 20px">
          Protected Secret
        </label>
        <!-- <input id="editClientProtectedSecret" type="text" [value]="selectedRowData?.protectedsecret"> -->
        <input id="editClientProtectedSecret" type="text" [(ngModel)]="selectedRowData.protectedsecret">
      </div>

      <button style="float: right" class="add" (click)="save()">
        <h4 style="font-style: bold">Save</h4>
      </button>
      <button class="cancel" (click)="save()">
        <h4 style="font-style: bold">Cancel</h4>
      </button>
    </div>
  </div>

</div>