Angular Material Stepper 在首次加载时未定义

Question

我在组件中使用 Angular Material Stepper。问题是，当组件第一次加载时，它会因错误消息而中断

ERROR TypeError: Cannot read property 'selectedIndex' of undefined

我的模板

<mat-horizontal-stepper #stepper>
        <!-- Steps -->
</mat-horizontal-stepper>    
<div>
    <button (click)="goBack(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === 0">Back</button>
    <button (click)="goForward(stepper)" type="button" 
        [disabled]="stepper.selectedIndex === stepper._steps.length-1">Next</button>
</div

我的 TS

import { MatStepper } from '@angular/material/stepper';

goBack(stepper: MatStepper){
    stepper.previous();
}

goForward(stepper: MatStepper){
    stepper.next();
}

而且我还在 TS 中将步进器定义为

@ViewChild('stepper') stepper: MatStepper;

但是如果我使用 [disabled] 属性作为

<div>
    <button (click)="goBack(stepper)" type="button" 
        [disabled]="stepper ? stepper.selectedIndex === 0 : false">Back</button>
    <button (click)="goForward(stepper)" type="button" 
        [disabled]="stepper ? stepper.selectedIndex === stepper._steps.length-1 : false">Next</button>
</div

步进器按预期工作。

注意：

Angular Version is :5.2.8
Angular Material Version:5.2.5 

Answer 1

使用猫王运算符：

<button (click)="goBack(stepper)" type="button" 
    [disabled]="stepper?.selectedIndex === 0">Back</button>

相当于

<button (click)="goBack(stepper)" type="button" 
    [disabled]="stepper ? stepper.selectedIndex === 0 : false">Back</button>

但更干净。对于点击事件，可以这样做

<button (click)="stepper && goBack(stepper)" type="button" 
    [disabled]="stepper?.selectedIndex === 0">Back</button>

在未定义步进器时阻止调用。

Answer 2

ViewChild 在 vi​​ew init hook 之后获取它的值，但是 angular 尝试在 init hook 之后读取它

https://angular.io/guide/lifecycle-hooks

如果您想将项目更新为 angular 8，您将获得工具来定义何时需要膨胀 ViewChild 变量

https://v8.angular.io/guide/static-query-migration