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)

请指导我处理这些错误。谢谢！

Answer 1

我遇到了同样的问题，我升级了@ angular / cdk的版本来解决它。（7.0.2 => 7.2.1）。

装订垫-步进器上的角度材料步进器错误

1 个答案: