Question

我遇到了涉及数据绑定的问题，我似乎无法解决。

我猜测可能是我在角度区域缺乏知识。

如果您知道解决方案，我也可以提供一些小解释。

我的问题：

我有一张表与* ngFor一起使用，以便在我的数据对象中写下所有用户。

然后我对其中的每一个都进行了折叠，以便用户可以编辑其中的每一个。每个崩溃都有自己的密码＆＃34;和＃34;重复密码＆＃34;领域。

附加到＆＃34;密码＆＃34; -field我有一个名为＆＃34; Slump＆＃34;这个按钮的作用是它调用一个函数，将一个string类型的变量更改为一个可能想用作密码的随机字符串。

我的问题是，当我调用此函数时，我更改了我在表中每一行用作数据绑定的变量。我希望生成的密码对于它所附加的输入字段是唯一的。

图片：

----------------------------------------------- ----------------------------分开

代码：

hantera-anvandare.ts：

export class HanteraAnvandareCmp {
private updateUserPwd: string;

private users: Object[] = [
    { userID: '1',  firstName: 'Name0',  lastName: 'lastname', username: 'Name.lastname@companydomain.se', teamName: 'randomteamname',  teamID: 1 }, 
    { userID: '2',  firstName: 'Name2',  lastName: 'lastname', username: 'Name.lastname@companydomain.se2', teamName: 'randomteamname2', teamID: 2 },
    { userID: '3',  firstName: 'Name3',  lastName: 'lastname', username: 'Name.lastname@companydomain.se3', teamName: 'randomteamname3', teamID: 3 },
    { userID: '4',  firstName: 'Name4',  lastName: 'lastname', username: 'Name.lastname@companydomain.se4', teamName: 'randomteamname4', teamID: 4 },
    { userID: '5',  firstName: 'Name5',  lastName: 'lastname', username: 'Name.lastname@companydomain.se5', teamName: 'randomteamname4', teamID: 4 },
    { userID: '6',  firstName: 'Name6',  lastName: 'lastname', username: 'Name.lastname@companydomain.se6', teamName: 'randomteamname4', teamID: 4 },
    { userID: '7',  firstName: 'Name7',  lastName: 'lastname', username: 'Name.lastname@companydomain.se7', teamName: 'randomteamname4', teamID: 4 },
    { userID: '8',  firstName: 'Name8',  lastName: 'lastname', username: 'Name.lastname@companydomain.se', teamName: 'randomteamname4', teamID: 4 }
];
private teams: Object[] = [
    { teamName: 'randomteamname', teamID: 1 },
    { teamName: 'randomteamname2', teamID: 2 },
    { teamName: 'randomteamname3', teamID: 3 }
];

private generatePassword():string {
    var length = 8,
        charset = "ABCDEFGHJKLMNPRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789",
        retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
        retVal += charset.charAt(Math.floor(Math.random() * n));
    }
    this.updateUserPwd = retVal;
}

hantera-anvandare.html：

<div class="form-group col-lg-6 col-md-6 col-sm-6">
  <div class="form-group">
        <label>Nytt lösenord</label>
        <div class="input-group">
              <input type="text" class="form-control" ngControl="edit_password" [(ngModel)]="updateUserPwd" placeholder="Nytt lösenord">
              <span class="input-group-btn">
                    <a (click)="generatePassword()" class="btn btn-primary">Slumpa</a>
              </span>
        </div>
  </div>

Answer 1

working code

的ID

您必须为使用ngModel语法迭代的每一行创建单独的引用/不同ngFor。

（如果我没有注意） - 问题是当你更新密码时，它会反映在每一行的密码文本框中。为避免这种情况，您必须为每行创建不同的ngModel，如上所述。

我为您做了 working code ，其中包含部分代码（非完整代码）。我希望你能弄明白我做了什么。您可能会遇到[(ngModel)]="updateUserPwd"的问题。

如果您正在寻找，请告诉我。

<div class="form-group col-lg-6 col-md-6 col-sm-6">
      <div class="form-group" *ngFor="#item of users;#i=index">
            <label>Nytt lösenord {{i}}</label>
            <div class="input-group">
                  <input type="text" class="form-control"  [(ngModel)]="item.updateUserPwd" placeholder="Nytt lösenord">
                  <span class="input-group-btn">
                        <a (click)="generatePassword(i,item)" class="btn btn-primary">Slumpa</a>
                  </span>
            </div>
      </div>
</div>

private generatePassword(i,item):string {   <------this is single object from ngFor which you want to update.
    console.log('started' + i );
    console.log(item);
    var length = 8,
        charset = "ABCDEFGHJKLMNPRSTUVWXYZabcdefghijkmnopqrstuvwxyz23456789",
        retVal = "";
    for (var i = 0, n = charset.length; i < length; ++i) {
        retVal += charset.charAt(Math.floor(Math.random() * n));
    }

    item.updateUserPwd=retVal;  <------ this is important. This will change/update individual object property that you want to update. 
  }
}

独特的数据绑定

1 个答案: