Angular - NgModel in ngFor not update var

Question

I try to create a dynamic setting option in app, but the ngmodel seems does'nt work correctly..

That my code in componnent.ts :

categories = [
    {title: 'General', options: [
        {settingsService: this.settingsService.option.one, description: '...'},
        {settingsService: this.settingsService.option.two, description: '...'},
    ]},
    {title: 'Group', options: [
        {settingsService: this.settingsService.option.three, description: '...'},
        {settingsService: this.settingsService.option.three, description: '...'},
    ]},];

constructor(
    public applicationService: ApplicationService
) { }

Here this.settingsService.option.* is a boolean

And my code in component.html

    <div class="col-xs-12" *ngFor="let category of categories">
        <h3>{{category.title}}</h3>

        <div class="col-xs-12" *ngFor="let option of category.options">

            <mat-checkbox color="primary" [(ngModel)]="option.settingsService">{{option.description | translate }}</mat-checkbox>

        </div>
    </div>

I search on google and i found reactive forms, but with the structure of my var "categories" and the "title" i don't know how to adapt... That what i hope you have a solution to use ngmodel.

Maybe use [(ngModel)]="this[option.settingsServices]", but in a double loop I don't find how it's work...

The problem i have is when i click on the checkBox of the first "this.settingsService.option.three" the second one doesn't update but he referer to the same var...

question from:https://stackoverflow.com/questions/65883808/angular-ngmodel-in-ngfor-not-update-var

Answer 1

Waitting for answers