如何动态绑定ngmodel？

Question

我有一个使用 primeng 复选框的组件：

<div *ngFor="let user of users">
    <p-checkbox 
        [name]="'0' + user.id"
        [value]="'User:' + user.id" 
        [ngModel]="getUserModel()"                                        
        (ngModelChange)="change($event)">
    </p-checkbox>

    <p-checkbox 
        [name]="'0' + user.id"
        [value]="'Admin:' + user.id" 
        [ngModel]="getUserModel()"                                        
        (ngModelChange)="change($event)">
    </p-checkbox>
</div>


getUserModel() { 
    var model = [];
    this.users.forEach(u => {
        if(u.category === 'Admin') 
            model.push('Admin:' + u.id);
        else 
            model.push('User:' + u.id);
    };

    return model;
}

当我这样做时，分页符似乎会永远循环调用 getUserModel() 方法。如何动态分配模型？

Answer 1

我不知道您的网站为什么会崩溃，但是 Angular 经常访问 ngModel 中的值，因此通常绑定函数不是一个好主意。相反，最好建立一次值，然后将 ngModel 绑定到一个变量。 Angular 跟踪该变量的更改，因此如果您更改它，Angular 也会更改。

在您的情况下，您可以在保存 getUserModel() 结果的用户模型中添加一个附加字段，然后像这样访问它：

<div *ngFor="let user of users">
    <p-checkbox 
        [name]="'0' + user.id"
        [value]="'User:' + user.id" 
        [ngModel]="user.resOfGetUserModel"                                        
        (ngModelChange)="change($event)">
    </p-checkbox>

    // ... code omitted
</div>

在您的 ts 中，您对用户执行 for 循环，在其中为用户的每个条目执行 getUserModel() 并将其保存到 "resOfGetUserModel"。

如果 users 是 getUserModel 的结果，那么显然你可以直接输入，如下所示：[ngModel]="users"

如何动态绑定ngmodel？

How to bind ngmodel dynamically?

angular

angular-forms