Неопределенное значение во время второго выполнения методов в приложении Angular - PullRequest
Новая
       25

Неопределенное значение во время второго выполнения методов в приложении Angular

0 голосов
/ 06 мая 2018

У меня очень интересная проблема с моим фрагментом кода приложения.

CategoriesPageComponent: 

export class CategoriesPageComponent implements OnInit {

  private categories: Array<Category> = [];
  public randomizedCategories: Array<Category> = [];

  constructor(private router: Router,
              private categoriesService: CategoriesService){


    this.categoriesService.getAllCategories().subscribe((categories) => {
      this.categories = categories;
      this.randomizedCategories = this.randomizeCategories(this.categories, 7);
    });
  }

  ngOnInit() {
  }

  private randomizeCategories(allCategories, numberOfCategories): Array<Category> {
    const categoryArray = [];
    const categoriesIDsArray = this.getRandomArray(1, allCategories.length - 1, numberOfCategories);

    for (var categoryKey in categoriesIDsArray) {

      const subcategoryID = this.getRandomArray(1, allCategories[categoriesIDsArray[categoryKey]].subcategories.length - 1, 1);

      console.log(subcategoryID);
      const wordID = this.getRandomArray(1, allCategories[categoriesIDsArray[categoryKey]].subcategories[subcategoryID].words.length - 1, 1);

      const word: Word[] = allCategories[categoriesIDsArray[categoryKey]].subcategories[subcategoryID].words[wordID];
      const subcategory: Subcategory[] = allCategories[categoriesIDsArray[categoryKey]].subcategories[subcategoryID];
      subcategory['words'] = word;

      const category: Category = allCategories[categoriesIDsArray[categoryKey]];
      category.subcategories = subcategory;

      categoryArray.push(category);
    }

    return categoryArray;
  }

  getRandomArray(min, max, numOfElements) {
    let A = [];
    while (max >= min) {
      A.push(max--);
    }

    A.sort(function () {
      return .5 - Math.random();
    });
    return (numOfElements === 1) ? A[0] : A.slice(0, numOfElements);
  }

  changeCategories(){
    console.log(this.randomizeCategories(this.categories, 7));
  }
}

Когда методы randomizeCategories () выполняются в конструкторе, все они работают очень хорошо, но когда я вызвал этот метод в методе changeCategories (), когда я нажал кнопку, в консоли браузера выдается ошибка:

Изображение с ошибкой

49 строка кода: 

  const wordID = this.getRandomArray(1, allCategories[categoriesIDsArray[categoryKey]].subcategories[subcategoryID].words.length - 1, 1);

wordID, переменные subcategoryID не определены.

Есть ли у вас идеи решить эту проблему?

Заранее спасибо за помощь.

1 Ответ

0 голосов
/ 06 мая 2018

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

Для решения этой проблемы вам следует подождать, пока массив не будет заполнен, поэтому в html попытайтесь: 

<button *ngIf="categories?.length">...</button>

, чтобы часть в <button> не отображалась до того, как данные станут доступны, или используйте (как я уже говорил в * ngIf) оператор безопасной навигации. ?. Таким образом, собственность после. оценивается только тогда, когда категории являются! = null.

...