Angular MatStepper 无法识别来自两个 str 数组的缓存值（但成功识别来自另一个 str 数组的值）

Question

我有一个 MatStepper 用于导航到注册流程的下一页。我还有一个方法可以从缓存中加载值（如果可用），如果可用，则 MatStepper 跳至第 2 页。之后，未来的方法将这些缓存值预填充表单。

检索到 cachedSports 的情况会导致 MatStepper 工作并跳到第 2 页，但是当我尝试使用 cachedPets 或 cachedAnimals MatStepper 失败并给出以下错误：

Cannot read properties of undefined (reading 'next')

cachedSports 和这两个失败场景之间没有太大区别，所以我不知道罪魁祸首是什么。这三个都是字符串数组，它们的缓存中的值已成功进入。

    // Cached values are retrieved from another file, memory-cache.service.ts
    loadFromCache(): void {
        const cachedPets: string[] = this.cacheService.get<string[]>(MemoryCacheService.WellKnownKeys.pets) ?? [];
        const cachedSports: string[] = this.cacheService.get<string[]>(MemoryCacheService.WellKnownKeys.sports) ?? [];
        const cachedAnimalNames: string[] = this.cacheService.get<string[]>(MemoryCacheService.WellKnownKeys.animals) ?? [];

        // Note that cachedPets and cachedAnimalNames share ('targetEveryAnimal')
        if (cachedPets.length > 0) {
          this.targetingFormGroup.get('targetEveryAnimal').setValue('Specific'); 
          this.targetPetChange({ value: 'Specific' }, cachedPets);
        } else if (cachedSports.length > 0) {
          this.targetingFormGroup.get('targetEverySport').setValue('Specific');
          this.targetSportChange({ value: 'Specific' }, cachedSports);
        } else if (cachedAnimalNames.length > 0) {
          this.targetingFormGroup.get('targetEveryAnimal').setValue('Specific');
          this.targetAnimalChange({ value: 'Specific' }, cachedAnimalNames);
        } 

        // The values correctly come through:
        console.log('cachedPets: ', cachedPets); // ["Cat"]
        console.log('cachedSports: ', cachedSports); // ["Tennis"]
        console.log('cachedAnimalNames: ', cachedAnimalNames); // ["Chinchilla"]

        this.goForward();
        this.location.replaceState('filters/setup/create/page2');
        this.skipPageOne = true;

        this.cacheService.remove(MemoryCacheService.WellKnownKeys.pets);
        this.cacheService.remove(MemoryCacheService.WellKnownKeys.sports);
        this.cacheService.remove(MemoryCacheService.WellKnownKeys.animals);

    }

  goForward(){
    this.myStepper.next();
    // Defined as: @ViewChild('stepper') private myStepper: MatStepper;
  }

这是将缓存值实际添加到表单中的地方


// Same file as the above code

validateFormTargeting() {

  const sports = (spt === 'Specific') ? this.targetingFormGroup.get('sports').value : [];
  console.log('tfg-sports: ', this.targetingFormGroup.get('sports').value) // ["Tennis"]
  console.log('sports: ', sports) // ["Tennis"]

  let pets;
  let animalNames;

  if (animt === 'Specific') {
    // pets = this.tarFormGroup.get // etc
    animalNames = this.targetingFormGroup.get('animalNames') ? this.targetingFormGroup.get('animalNames').value : [];
    
    // The console messages (therefore this code block) is not reached because of the "Cannot read properties of undefined" error
    console.log('tfg-animalNames: ', this.targetingFormGroup.get('animalNames').value)
    console.log('animalNames: ', animalNames)
  }
}

详细的错误信息：

TypeError: Cannot read properties of undefined (reading 'next')
    at AppModalFormCreateComponent.goForward (myForm.component.ts:371:20)
    at AppModalFormCreateComponent.loadFromCache (myForm.component.ts:357:10)
    at AppModalFormCreateComponent.ngOnInit (myForm.component.ts:227:10)

Answer 1

调用goForward时ViewChild不是defined/set。

如果正在更新模板，则可能是时间问题。出于测试目的，您可以将 goForward 中的代码包装在 setTimeout()

中

Answer 2

确保您的代码仅在 ngAfterViewInit 之后运行，因为这可能是您在重新渲染 de view 之前尝试访问和元素的情况，导致查询的 viewchild 未定义属性在视图上。

注意：ngAfterViewInit 可能不是最好的生命周期选项，因此请从列表中选择最适合您的选项。 https://angular.io/guide/lifecycle-hooks

Angular MatStepper 无法识别来自两个 str 数组的缓存值（但成功识别来自另一个 str 数组的值）

Angular MatStepper fails to recognize cached values from two str arrays (but successfully recognizes values from another str array)

javascript

caching

typescript

angular-material

angular

这是将缓存值实际添加到表单中的地方

详细的错误信息：