Angular 当密码更改时，NgModel用密码填充登录掩码中的所有输入字段

我面临着一种奇怪的行为，对此没有任何解释。问题如下：当用户在登录提示中插入用户和密码，并且在幕后发生了一些事情时，用户字段也会填充用户输入的密码。在重新呈现表单时，该表单似乎没有正确填充字段

代码如下所示（为便于演示而简化）：

LoginComponent.ts

public selModule = { AuthProps: [{Name: "User", Display: "DUser"}, {Name: "Password", Display: "DPassword"}] };
public loginData: { [key: string]: string } = {};

public changePW() {
    this.loginData['Password'] = "NewTestPw";
}

LoginComponent.html

<div *ngFor="let authProp of selModule?.AuthProps">
        <label>{{ authProp.Display }}</label>
        <input [type]="handleInputType(authProp)" [(ngModel)]="loginData[authProp.Name]" name="authProp.Name">
</div>
<button (click)="changePw()">Change PW</button>

通过单击按钮“Change PW”，仅更改loginData['Password']，但用户的输入字段也将填充“NewTestPW”

---

为什么会这样

这是预期的，因为您有两种方式将其与登录数据密码绑定，当您这样做时，如果loginData.password将被更改，它将反映在文本框中。如果你不想改变你的行为

[(ngModel)]="loginData[authProp.Name]"

到

打字

public handleValue(prop, value) {
     this.loginData[prop] = value;
  }

---

你能给出changePw的代码吗？你可以在LoginComponents.ts的代码片段中看到它。它只是将这个.loginda['Password']设置为一个不同的值。使用

[name]=“authProp.name”

使属性“name”更改到目前为止！这意味着本例中的绑定是对loginData对象进行的，而不是对该对象的属性进行的？这个解释正确吗？不，是对属性做的，但它是双向的。这意味着，若您更改输入中的值，则属性将得到更改。若更改属性，则输入值将更改。这就是为什么它被称为双向绑定。好的，我知道双向绑定的概念。但是我仍然不明白为什么双向绑定到loginData['User']的输入字段会将其值更改为双向绑定到loginData['Password']的输入字段的值。handleInputType（）中有什么内容？请参见：-。工作正常。handleInputType（）中可能有问题？你能显示它的代码吗？

[(ngModel)]="loginData[authProp.Name]"

(change)="handleValue(authProp.Name, $event.target.value)"

public handleValue(prop, value) {
     this.loginData[prop] = value;
  }