首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >将从*ngFor创建的输入字段复制到外部模式中的输入字段

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

Stack Overflow用户
提问于 2019-04-11 08:25:55
回答 1查看 488关注 0票数 0

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

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

代码语言:javascript
复制
<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>
代码语言:javascript
复制
<!-- 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>
代码语言:javascript
复制
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"
    }
]
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/55623022

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档