Typescript/Angular - 未定義のプロパティ - 配列内の変数にアクセスする方法

Question

デバッグから、qがnext（）関数で定義されていないことがわかりました。コンポーネント（single.Value）の値をローカルストレージにプッシュするために、配列内の「id」にアクセスするにはどうすればよいですか？あなたが提供できるあらゆるお手伝いをありがとう！

<ion-navbar color="primary"> 
    <ion-title>Quiz</ion-title> 
    <ion-buttons start> 
     <button ion-button icon-left (click)="prev()"><ion-icon name="arrow-back"></ion-icon> Prev</button> 
    </ion-buttons> 
    <ion-buttons end> 
     <button ion-button icon-right (click)="next(q)">Next<ion-icon name="arrow-forward"></ion-icon></button> 
    </ion-buttons> 
     </ion-navbar> 
    </ion-header> 

    <ion-content padding> 
    <ion-slides #Quiz> 
     <ion-slide *ngFor="let q of questions"> 
    {{q.question}} 
    <range [single]="single"></range> 
     <progress-bar [progress]="loadProgress"></progress-bar> 
    </ion-slide> 
</ion-slides> 
</ion-content> 

Typescript file: 

    export class QuizPage { 
    public RangeComponent; 
    public ProgressBar; 

    single = { 
    Value: 2 
    }; 

    questions = [ 
    {id: "programming", question: 'Which programming language do you  prefer?'} 

    constructor(public navCtrl: NavController, public storage: Storage,  public rangeComponent: RangeComponent, public progressBar: ProgressBarComponent) { 
    this.randomizeAnswers(this.questions); 
    this.setData(); 
    this.getData(); 
    } 


    randomizeAnswers(questions: any[]): any[] { 
    for (let i = this.questions.length - 1; i > 0; i--) { 
    let j = Math.floor(Math.random() * (i + 1)); 
     let temp = this.questions[i]; 
     this.questions[i] = this.questions[j]; 
     this.questions[j] = temp; 
    } 

    return this.questions; 
    } 


    setData() { 
    this.storage.set('QuestionData', this.questions); 
    } 

    getData() { 
    this.storage.get('QuestionData').then((data) => { 
    console.log(data); 
    }); 
    } 

    //slides 
    @ViewChild('Quiz') Quiz: any; 

    next(q) { 
    // console.log('single.Value is next'); 
    console.log(this.single.Value); 
    this.saveToArray(q); 
    this.single.Value = 2; // Reset value to middle after every question 
    this.Quiz.slideNext(); 
    this.progressBar.addProgress(); 
    } 

    saveToArray(q) { 
    if (q.id == "programming") { 
     this.storage.set('programming', this.single.Value); 
     this.storage.get('programming').then((data2) => { 
     console.log("data logged."); 
     }) 
    } 

Answer 1

qあなた*ngForの外にそれを使用しているためnext()機能で定義されていません。

代わりに、あなたのスライダーの現在位置を取得するためにthis.Quiz.getActiveIndex()を使用し、直接質問配列からIDを取得することができ、あなたの次の関数にQを渡す：

this.questions[this.Quiz.getActiveIndex()].id // check if the slide index starts at 0 or 1