Угловой материал Stepper не определен при первой загрузке - PullRequest
Новая
       30

Угловой материал Stepper не определен при первой загрузке

0 голосов
/ 17 июня 2019

Я использую 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

Ответы [ 2 ]

1 голос
/ 17 июня 2019

Используйте оператор Элвиса : 

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

Но чище.Для события click вы можете сделать это 

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

Чтобы запретить вызов, если шагер не определен.

0 голосов
/ 17 июня 2019

ViewChild получает его значение после хука инициализации представления, но angular пытается прочитать его после хука инициализации

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

, если вы хотите обновить свой проект до angular 8, выВы получите инструменты, чтобы определить, когда вам нужно накачать переменную ViewChild

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

...