Угловая ошибка материала в шаговом коврике

Question

Я пытаюсь связать родительский компонент mat-stepper, чтобы проверить, является ли выбранный индекс чем-то, а затем сделать что-то еще.это работа, но она дает мне ошибки для каждой вкладки, которая связывает.он говорит, что не может найти свойство '0' из неопределенного.как обработать эти ошибки.

это мой HTML-код:

<mat-horizontal-stepper #matStepper (selectionChange)="checkChange($event)" linear>
    <mat-step [label]="tabLabels[0]" state="properties" [completed]="propertiesStepCompleted">
      <mer-add-product-properties 
[matStepper]="matStepper"
                                  [productId]="productId"
                                  (idSetter)="setProductId($event)"
                                  (setProduct)="fetchProductProperties($event)"
                                  (setAttributes)="fetchProductAttributes($event)"
                                  #propertiesComponent
                                  (changeCompleted)="changeComplete($event)"></mer-add-product-properties>
    </mat-step>
    <mat-step [label]="tabLabels[1]" state="images">
      <mer-add-product-images [productId]="productId" 
      *HERE* => [matStepper]="matStepper"
                              #imageComponent (sendImages)="fetchProductImages($event)"></mer-add-product-images>
    </mat-step>
    <mat-step [label]="tabLabels[2]" state="variants">
      <mer-add-product-variants #productVariantComponent 
      *AND HERE* => [matStepper]="matStepper" 
(sendDetail)="fetchProductDetail($event)"></mer-add-product-variants>
    </mat-step>
    <mat-step [label]="tabLabels[3]" state="overview">
      <mer-add-product-overview #overviewComponent [product]="product" [attributes]="attributes"
                                [productImage]="productImages" [productDetails]="productDetails"></mer-add-product-overview>
    </mat-step>

    <ng-template matStepperIcon="properties">
      <mat-icon>ballot</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="images">
      <mat-icon>image</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="variants">
      <mat-icon>view_list</mat-icon>
    </ng-template>
    <ng-template matStepperIcon="overview">
      <mat-icon>visibility</mat-icon>
    </ng-template>
  </mat-horizontal-stepper>

Это работает, но в консоли есть 2 ошибки:

1- ERROR TypeError: Cannot read property '0' of undefined
    at FocusKeyManager.push../node_modules/@angular/cdk/esm5/a11y.es5.js.ListKeyManager.updateActiveItem (a11y.es5.js:856)
    at FocusKeyManager.push../node_modules/@angular/cdk/esm5/a11y.es5.js.ListKeyManager.updateActiveItemIndex (a11y.es5.js:882)
    at MatStepper.push../node_modules/@angular/cdk/esm5/stepper.es5.js.CdkStepper.ngAfterViewInit (stepper.es5.js:413)
    at callProviderLifecycles (core.js:22317)
    at callElementProvidersLifecycles (core.js:22291)
    at callLifecycleHooksChildrenFirst (core.js:22281)
    at checkAndUpdateView (core.js:23217)
    at callViewAction (core.js:23449)
    at execComponentViewsAction (core.js:23391)
    at checkAndUpdateView (core.js:23214)

2- ERROR TypeError: Cannot read property '0' of undefined
    at FocusKeyManager.push../node_modules/@angular/cdk/esm5/a11y.es5.js.ListKeyManager.updateActiveItem (a11y.es5.js:856)
    at FocusKeyManager.push../node_modules/@angular/cdk/esm5/a11y.es5.js.ListKeyManager.updateActiveItemIndex (a11y.es5.js:882)
    at MatStepper.push../node_modules/@angular/cdk/esm5/stepper.es5.js.CdkStepper.ngAfterViewInit (stepper.es5.js:413)
    at callProviderLifecycles (core.js:22317)
    at callElementProvidersLifecycles (core.js:22291)
    at callLifecycleHooksChildrenFirst (core.js:22281)
    at checkAndUpdateView (core.js:23217)
    at callViewAction (core.js:23449)
    at execComponentViewsAction (core.js:23391)
    at checkAndUpdateView (core.js:23214)

Пожалуйста, направьте менясправиться с этими ошибками.Спасибо!