型別錯誤：無法讀取未定義的屬性（讀取“slideNext”）（Ionic5）

我在 Ionic 5 中創建了一個應用程式，其中包含使用幻燈片的多個頁面。我創建了一個服務來存盤所有全域函式，并從每個頁面的任何 TS 檔案中呼叫它們。

當我嘗試在頁面中呼叫功能（正在使用中）時，除了包含對幻燈片（離子幻燈片）的參考的功能之外，一切都正常。

如果您有任何想法，請幫幫我好嗎？如果您想了解有關該問題的更多詳細資訊，請不要猶豫。

提前致謝

service.ts 檔案

import { Injectable, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { Component } from '@angular/core';
import { NavController, NavParams, IonSlides } from '@ionic/angular';

@Injectable({
  providedIn: 'root'
})
export class HttpService {



  @ViewChild('slides') 
  slides:IonSlides;

  slideOptions = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: false,
    pagination : {
      el: '.swiper-pagination',
      clickable: true
    },
    //allowSlidePrev:true,
    /*
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
    },*/
      slideShadows: true,
  };

  constructor(private router: Router){}

  
  async navigate(){
    this.router.navigate(['tabs/tab2'])
    await this.waitBefore(10);// Sleep thread for 10ms seconds (permet de réinitialiser radio states)
    this.router.navigate(['/quiz-maison'])
  }


  isOK:boolean=null;
  answers: any;
  hasAnswered: boolean = false;
  initState: boolean = false;
  score: number = 0;
  //allowSlidePrev=false;
  showAnswer(event:any) {
    // get data throught event emitter
      this.answers = event.target.value;
      if (this.answers=="correct"){
      //this.answers= this.bon;
      this.isOK=true;
      this.score  ;

      }

      else{
      //this.answers= this.mauv;
      this.isOK=false;false
      }
      this.hasAnswered = true;
  console.log("I'm showAnswer fct");
  console.log(this.slides);
  this.slides.slideNext();
  }

  ionSlideChange(){
  this.answers =null;
  this.isOK=null;
  this.hasAnswered = false;
  }

  
waitBefore(ms: number)
{
  return new Promise(resolve => setTimeout(resolve, ms));
}

  async goNextSlide(){
    await this.waitBefore(1000);// Sleep thread for 3 seconds
    //this.slides.lockSwipeToPrev(false);
    this.slides.slideNext();
    this.slides.lockSwipeToPrev(true);
    console.log("I'm goNextSlide fct");
  }

}

maison.ts 檔案：

import { Component, OnInit, ViewChild } from '@angular/core';
import { IonSlides, NavController, NavParams } from '@ionic/angular';
import { Router } from '@angular/router';
import { HttpService } from '../../service/http.service';

@Component({
  selector: 'app-quiz-maison',
  templateUrl: './quiz-maison.page.html',
  styleUrls: ['./quiz-maison.page.scss'],
  //providers: [NavParams]
})
export class QuizMaisonPage implements OnInit {

  @ViewChild('slides') slides: IonSlides;
    slideOptions = {
    initialSlide: 0,
    slidesPerView: 1,
    autoplay: false,
    pagination : {
      el: '.swiper-pagination',
      clickable: true
    },
    //allowSlidePrev:true,
    /*
    coverflowEffect: {
      rotate: 50,
      stretch: 0,
      depth: 100,
      modifier: 1,
    },*/
      slideShadows: true,
  };
  
  constructor(private http:HttpService){}

  ngOnInit() {
  }


  showAnswer(){
  this.http.showAnswer(event)
  }

  goNextSlide(){
    this.http.goNextSlide();
    }

    goToAnswers(){
      this.http.goToAnswers();
    }

  ionSlideChange(){
    this.http.ionSlideChange()

  }

  waitBefore(){
    let ms: number;
    this.http.waitBefore(ms)
  }
}

uj5u.com熱心網友回復：

嘗試傳遞對您的服務類的參考（使顯示答案也將幻燈片作為輸入引數），此外，我認為在您的服務中使用 @ViewChild 是不正常的。

根據角度檔案 Property decorator that configures a view query. The change detector looks for the first element or the directive matching the selector in the view DOM. If the view DOM changes, and a new child matches the selector, the property is updated.

就其本質而言，該服務與任何視圖無關。因此，這就是它未定義的原因，因為它沒有附加到它的視圖。

uj5u.com熱心網友回復：

確保您的 html 檔案中有 <ion-slides #slides>，因為那是您在 maison.ts 中為變數指定的名稱

  <ion-slides pager="true" style="height: 100%;" #questionario (ionSlideWillChange)="slideChanged()"> 

 @ViewChild('questionario') slides: IonSlides;

標籤：有角的 离子框架

上一篇：IonicCordova構建始終使用最新版本的androidx.appcompat:appcompatn并且失敗

下一篇：傳遞給模態componentProps的屬性未更新