ユニークなデータバインド

Question

私は解決できないようなデータバンディングを伴うこの問題を抱えています。

私は角度領域で私の知識の欠如かもしれないと思っています。

解決策がわかっている場合は、小さな説明も含めることができます。

私の問題：私はデータの私のオブジェクト内のすべてのユーザーを書くこと* ngForと一緒に使用するテーブルを持っている

。

私はこれらのそれぞれを崩壊させて、ユーザーがこれらのそれぞれを編集できるようにします。これらの折りたたみのそれぞれには、独自の「パスワード」と「パスワードの繰り返し」フィールドがあります。

「パスワード」フィールドに付けられています。「スランプ」と呼ばれるボタンがあります。このボタンの機能は、文字列型の変数を、使用する可能性のあるランダムな文字列に変更する関数を呼び出します。パスワード。

私の問題は、私がこの関数を呼び出すと、テーブルのすべての行でデータバインディングとして使用する変数を変更したことです。私は、生成されたパスワードを、それが接続されている入力フィールドに固有のものにします。

写真：

--------------------------------- ------------------------------------------ separate

コード：

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：あなたはを通して繰り返すことを個々の参照/行ごとに異なるngModelを作成する必要が

<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

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. 
    } 
}