如何检索 mat-checkbox 值

Question

I am a beginner with angular material. I have written this code so far:

 Answer { id: string; content: string; }

 <section *ngFor="let opt of step.answers"> <mat-checkbox [checked]="opt.id" (change)="check($event)"> <p [innerHTML]="opt.content"> </p> </mat-checkbox> </section>

I still can't figure out how to retrieve the id for every option selected in every stepper and collect them in array

Answer 1

so this is the solution I've found, it's close to @Çağrı proposition but I changed few things since "event" has an attribute checked that I can use without needing to use a variable to save the value of "isChecked"

 check(event, opt, userResponse) { var rep = []; if (event.checked === true) { userResponse.push(opt); } if (event.checked === false) { var index: number = userResponse.indexOf(opt); userResponse.splice(index, 1); } }

 <section *ngFor="let opt of step.answers" > <mat-checkbox (change)="check($event,opt,step.userResponse)"> <p [innerHTML]="opt.content"> </p> </mat-checkbox> </section>

Answer 2

in [checked] condition u can't put id. It is true false condition. U should add one attribute more of step.answers model which calls ischecked whose initial value is false. and create global array called choosenanswers,and write

Answer {
    id: string;
    content: string;
    ischecked:boolean=false;
}

then

 <section *ngFor="let opt of step.answers">
         <mat-checkbox [checked]="opt.ischecked" (change)="check($event)">
              <p [innerHTML]="opt.content"> </p>
          </mat-checkbox> 
    </section>

then in check event in components

  check(event){
      this.choosenanswers=[];
      this.step.answers.foreach(x=>{if(x.ischecked){ this.choosenanswers.push(x.id);}})
    }