Как получить MatstepLabel в составе Angular

Question

Я использую этот пример- https://stackblitz.com/angular/amjgpjxbpak?file=app%2Fstepper-overview-example.ts

Может кто-нибудь сказать нам, как получить имя matStepLabel в компоненте.

Answer 1

Насколько я могу судить, чистого решения не существует, даже если вы покопаетесь в источнике углового материала. Доступ к MatStepLabel прост, но на самом деле получить ярлык от него практически невозможно.

Здесь это стек, который показывает, как получить доступ к метке шага, но помните это довольно некрасиво.

Он получает доступ к MatStepper через @ViewChild, получает три MatStepHeader, а затем через nativeElement находит фактический innerText / textContent узла.

Answer 2

Вы можете прочитать значение в onSelectionChange event

<mat-horizontal-stepper (selectionChange)="onSelectionChange($event)" [linear]="isLinear" #stepper>

На компоненте

onSelectionChange($event){
   //previous step value
    console.log($event.previouslySelectedStep.stepControl.value);

    //current step value
    console.log($event.selectedStep.stepControl.value);
  }

или

вы можете читать значения непосредственно из вашего свойства formControl, как показано ниже.

this.firstFormGroup.controls.firstCtrl.value

https://stackblitz.com/edit/angular-stepper-demo?file=app%2Fstepper-overview-example.ts

Надеюсь, это то, что вы ищете