Angular 6: невозможно прочитать свойство 'длина' из неопределенного - PullRequest
Новая
       43

Angular 6: невозможно прочитать свойство 'длина' из неопределенного

0 голосов
/ 24 октября 2018

У меня действительно странная проблема.Я отправляю данные из родительского в дочерний компонент с помощью @Input, и я получаю эту ошибку, но когда я попытался напечатать значение в ngOnInit, я получил правильное значение, а не неопределенное.Данные в родительском элементе определены, и я получаю значение в консоли, когда печатаю данные в родительском и дочернем компонентах, и все равно получаю эту ошибку (даже если я получаю доступ к данным)

thisэто скриншот ошибки и значение, которое я получаю из console.log

enter image description here enter image description here

соответствующего родителяhtml: 

<quiz-course [quiz]="currentUnitQuiz"></quiz-course>

родительский ts: 

export class CoursePlayComponent implements OnInit {
  errorMessage: string;
  course: ICourse;
  courseId: number;

  // the current and prev quiz of this and prev unit (if there are)
  public currentUnitQuiz: IQuiz;
  public showQuiz: boolean;
  
  // .. more properties


  constructor(private courseService: CourseService,
      private route: ActivatedRoute,
      private router: Router,
      private userProgressService: UserProgressService) { }

  ngOnInit() {
      // save this course id from course-detail and get http request from the service
      this.courseId = JSON.parse(localStorage.getItem("courseId"));
      this.getCourse(this.courseId);
    }
    
  // Get course detail by id
  getCourse(id: number) {
      this.courseService.getCourse(id).subscribe(
          course => {
            this.course = course;
            
            // .. more code

            if (this.route.snapshot.firstChild.data.type == 'quiz') {
              this.getQuiz(this.currentUnitPos);
            }
          },
          error  => this.errorMessage = <any>error);
      }
      
      getQuiz(currentUnitPosition: number) {
      // .. more code
        this.showQuiz = true;
        this.currentUnitQuiz = this.course.units.find(u => u.position ===
        currentUnitPosition).quiz;
      }
 }

РЕДАКТИРОВАТЬ: добавлено больше кода, чтобы было понятно.Я получаю ту же ошибку, когда пытаюсь получить доступ к длине, но я также могу распечатать и получить число, поэтому я не знаю, в чем проблема.

child ts: 

export class CourseQuizComponent implements OnInit {

  @Input() quiz: IQuiz;
  
  // 1 = show the first page. 2 = show questions page. 0 = show neither
  public currentQuestion: IQuestion;
  public currentIndex: number;
  public currentUnit: number;
  public userAnswers: number[] = [];
  public correctAnswers: number;

  constructor(private courseService: CourseService,
      private route: ActivatedRoute,
      private router: Router,
      private fb: FormBuilder) { }

  ngOnInit() {
    console.log("length in child: ", this.quiz.questions.length); // **NOT** undefined
    this.restartQuiz();
  }
  
    restartQuiz() {
    this.currentUnit = +this.route.snapshot.paramMap.get('unitId');
    this.correctAnswers = 0;

    for(let i = 0; i < this.quiz.questions.length; i++) {
      this.userAnswers[i] = 0;
    }

    this.getCurrentQuestion(0);
  }

}

интерфейсы: 

export interface IQuiz {
  id: number;
  name: number;
  unit_id: number;
  unit_position: number;
  questions: IQuestion[];
}

export interface IQuestion {
  id: number;
  name: string;
  quiz_id: number;
  position: number;
  question: string;
  answer1: string;
  answer2: string;
  answer3: string;
  answer4: string;
  correct: number;
  selected: number;
}

1 Ответ

0 голосов
/ 24 октября 2018

это вход для ребенка, и поэтому лучше всего избегать этой неопределенной проблемы, используйте onchanges lifehook. 

 import { OnChanges, SimpleChanges } from '@angular/core';

export class CourseQuizComponent implements OnInit, OnChanges {
  ngOnChanges(changes: SimpleChanges) {
   for (const prop of Object.keys(changes)) {
    const chng = changes[prop];
    if (prop === 'quiz') {
      this.quiz = chng.currentValue;
      // use this quiz variable in the restartQuiz() 
    }
  }
 }
 ngOnInit() {
   this.restartQuiz();
  }
}

попробуйте это и дайте мне знать, если это работает.

...