angular - 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