Eindeutige Datenbindung

Question

Ich habe dieses Problem mit Daten-Bandings, die ich nicht lösen kann.

Ich vermute es könnte der Mangel an meinem Wissen im Winkelbereich sein.

Wenn Sie die Lösung kennen, die ich von Ihnen schätzen würde, könnte eine kleine Erklärung auch enthalten.

Mein Problem:

ich einen Tisch bekommen habe, die ich benutze zusammen mit * ngFor alle Benutzer in meinem Objekt von Daten zu schreiben.

Ich habe dann einen Zusammenbruch auf jeder von diesen, um es dem Benutzer zu ermöglichen, jeden von diesen zu bearbeiten. Jeder dieser Zusammenbrüche hat seine eigenen Felder "Passwort" und "Passwort wiederholen".

An das "password" -Feld angehängt habe ich eine Schaltfläche, die "Slump" genannt wird. Diese Schaltfläche ruft eine Funktion auf, die eine Variable vom Typ string in eine zufällige Zeichenfolge ändert, die als verwendet werden soll ein Passwort.

Mein Problem ist, dass ich die Variable, die ich als eine Datenbindung in jeder Zeile in der Tabelle verwende, geändert habe, wenn ich diese Funktion aufruft. Ich möchte, dass das generierte Passwort eindeutig für das Eingabefeld ist, an das es angehängt ist.

Bilder:

--------------------------------- ------------------------------------------ trennen

Code:

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

Sie haben individuelle Referenz/verschiedene ngModel für jede Zeile erstellen, die Sie durchlaufen mit ngFor Syntax.

(wenn ich nicht bin) - Ihr Problem ist, wenn Sie Ihr Passwort aktualisieren, wird es in jeder Zeile Passwort Textfeld angezeigt. Um das zu vermeiden, müssen Sie für jede Zeile wie oben beschrieben verschiedene ngModel erstellen.

Ich habe diese working code für Sie gemacht, die Ihren Code teilweise (nicht vollständigen Code) enthält. Ich hoffe, du wirst herausfinden können, was ich getan habe. Sie können ein Problem mit [(ngModel)]="updateUserPwd" haben.

Bitte lassen Sie mich wissen, wenn dies das ist, was Sie gesucht haben.

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