Привет, я использую ionic, и я пытаюсь передать свое значение ion-item на модальную страницу, но сейчас у меня проблема с получением значения из моего ion-item

Question

Это мой HTML-код, содержащий мой список ионов и элемент ion. и в моем ts-файле я пытаюсь получить значение своего элемента ion, сохраняя его в value: string, но когда я консоль в журнале, он говорит, что значение пусто, но мои данные, которые являются моим именем класса, показывают его значение. мой вопрос в том, как я могу получить значение из элемента ion, чтобы я мог перейти на следующую страницу с помощью модального контроллера

 html    
    <ion-header>
      <ion-toolbar>
        <ion-title>studentlistattendance</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>

      <ion-card>
        <ion-card-header>
        <ion-card-title>
          {{data}}
        </ion-card-title>
        </ion-card-header>

        <ion-list *ngFor="let student of studentList">
          <ion-item button deatil="true"  (click)="openattendanceform()" [(ngModel)]="value" *ngIf="student.class == data">
            {{student.name}}
          </ion-item>
        </ion-list>
      </ion-card> 

    </ion-content>

    .ts
    export class StudentlistattendancePage implements OnInit {

      data: any; //this parameter is to receive data from attendance1 page (class)
      studentList: Array<any> = [];
      value: string;

      constructor(private activeRoute: ActivatedRoute, 
                  private firestoreDbService: FirestoreDbService,
                  private modalController: ModalController) { 
        this.activeRoute.queryParams.subscribe(params =>{
          console.log('params: ', params); 
          if(params && params.special){
            this.data = JSON.parse(params.special);
          }
        });

        this.getStudentList();
      }

      getStudentList(){
        this.firestoreDbService.getData().subscribe(result =>{ 
          console.log('result', result);
          this.studentList = result;
        })
      }


      ngOnInit() {
      }

      async openattendanceform(){
        console.log(this.data);
        console.log(this.value);
        const modal = await this.modalController.create({
          component: AttendanceformPage,
          componentProps: {
            student_name: this.value,
            selected_date: this.data
          }
        });
        modal.present();
      }

    }