как получить значение из флажка при щелчке и показать его сверху перед отправкой

Question

Мне нужно показать значение моего флажка, когда оно щелкнуло, и показать его сверху с чипами перед отправкой. Мой флажок использовать сервис для отображения данных

Я уже использую функцию clicked в своем теге-флажке, но она не получает значение, пока я не щелкну ее дважды.

мой HTML:

<mat-chip-list #chipList>
                    <mat-chip color="primary" *ngIf="ars != null" selected>
                      {{ars}}
                       <mat-icon matChipRemove (click)="remove(dataForm)">cancel</mat-icon>
                    </mat-chip>
                  </mat-chip-list>
                </div>
                <mat-form-field class="search">
                  <mat-icon matPrefix>search</mat-icon>
                  <input
                    fromControlName="firstName"
                    type="search"
                    matInput
                    placeholder="Search"
                  />
                </mat-form-field>
                <section>
                  <mat-checkbox value="0" class="" [(ngModel)]="checked" (click)="checkAll"> 
                    select all
                  </mat-checkbox>
                </section>
                <div *ngFor="let data of formData">
                  <mat-checkbox [(ngModel)]="data.isSelected"
                  (click)="submit(formData)"> {{ data.name }} </mat-checkbox>
                </div>

мой файл TS: это моя функция для получения значения

submit(a) {

    for (let i = 0; i < a.length; i++) {
      if (a[i].isSelected === true) {
        //this.status = this.status + (JSON.stringify(a[i])) ;
        // this.arr = [this.status];
        this.arr = Object.values(a[i]);
        this.ars = this.arr[0];
        //this.arr, Validators.required;
      }
    }
    console.log('test for submit', this.ars);

  }

Я ожидаю, что значение, показанное сразу после нажатия, но значение, показанное после флажка, щелкнуло дважды