如何動態綁定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也會這樣做。

在您的情況下，您可以向Users模型添加一個附加字段，以保存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循環，然后對Users的每個條目執行getUserModel（）並將其保存到“ resOfGetUserModel”。

如果用戶是getUserModel的結果，那么顯然您可以直接輸入，例如： [ngModel]="users"