Angular Шаговый двигатель материала больше не работает - PullRequest
Новая
       29

Angular Шаговый двигатель материала больше не работает

0 голосов
/ 03 августа 2020

Недавно я пытался развернуть проект в производственной среде, и по этой причине я играл со значением angular. json baseHref и значениями deployUrl. Я также добавил HashLocationStrategy, чтобы обеспечить нормальное отображение веб-страниц на сервере Apache, поскольку другого способа заставить его работать нет. (Я говорю это, потому что не знаю, может ли это повлиять на функциональность проекта.)

Теперь проблема возникает даже в режиме разработки. У меня есть степпер, который работал, и по какой-то причине методы stepper.next(), stepper.previous() или stepper.reset() просто не работают.

sign-and-send.component. html

    <mat-horizontal-stepper [linear]="true" #stepper class="stepper_custom">
  <mat-step [stepControl]="firstFormGroup" required>
    <ng-template matStepLabel>Carga un PDF</ng-template>
    <div class="Hflex">
    <mat-form-field style="width: 50vw;">
      <mat-label>Cargar archivo PDF</mat-label>
      <ngx-mat-file-input
        appearance="outline"
        placeholder="Cargar archivo PDF"
        [accept]="'.pdf'"
        (change)="load_pdf($event)"
        required
      ></ngx-mat-file-input>
      <mat-icon matSuffix>folder</mat-icon>
    </mat-form-field>
    <button type="button" mat-raised-button color="primary" (click)="stepper.next()">Continuar<mat-icon>play_arrow</mat-icon></button>
    </div>
  </mat-step>
  <mat-step [stepControl]="secondFormGroup">
    <ng-template matStepLabel>Elige sello</ng-template>
    <div class="Hflex">
      <button type="button" mat-raised-button color="primary" (click)="stepperForward(stepper)"><mat-icon class="backwards">play_arrow</mat-icon>Opción previa</button>
    <mat-form-field color="primary">
      <mat-label>Elige Sello</mat-label>
      <mat-select [(value)]="selloElegido"
      (selectionChange)="add_sello(add_image)"
      [disabled]="sellos_disabled">
        <mat-option value="f">Ferretería
          <img width="50%" height="50%" src="../../../assets/img/SelloFerre.png"/>
        </mat-option>
        <mat-option value="c"
          >Cerámicas
          <img
            width="50%"
            height="50%"
            src="../../../assets/img/SelloCeram.png"
          />
        </mat-option>
      </mat-select>
   </mat-form-field>

  <mat-checkbox [(ngModel)]="firmado" checked=true color="primary" (change)="add_sello(add_image)" [disabled]="firmado_disabled">Añadir mi firma</mat-checkbox>
  <button type="button" mat-raised-button color="primary" (click)="stepper.next()">Continuar<mat-icon>play_arrow</mat-icon></button>
  </div>

  </mat-step>
  <mat-step [stepControl]="thirdFormGroup">
    <ng-template matStepLabel>Elige qué hojas firmar</ng-template>
    <div class="Hflex">
      <button type="button" mat-raised-button color="primary" (click)="stepper.previous()"><mat-icon class="backwards">play_arrow</mat-icon>Opción previa</button>
    <mat-radio-group
  color="primary"
  class="radio-group"
  [(ngModel)]="hojas_firmada_elegida"
  (change)="add_sello(add_image)">
  <mat-radio-button class="hojas_firmar_radio-button" *ngFor="let tipo of hojas_firmadas" [value]="tipo">
    {{tipo}}
  </mat-radio-button>
</mat-radio-group>
<button type="button" mat-raised-button color="primary" (click)="stepper.next()">Continuar<mat-icon>play_arrow</mat-icon></button>
</div>
  </mat-step>
  <mat-step [stepControl]="fourthFormGroup">
    <ng-template matStepLabel>Enviar por correo electrónico</ng-template>
    <div class="Hflex">
      <button type="button" mat-raised-button color="primary" (click)="stepper.previous()"><mat-icon class="backwards">play_arrow</mat-icon>Opción previa</button>

    <mat-form-field color="primary" appearance="fill" style="width: 25vw;text-align:center;">
      <mat-icon matPrefix>email</mat-icon>
      <mat-label>Inserte aquí el email</mat-label>
      <input matInput type="email" [(ngModel)]="correoelectronico" />
    </mat-form-field>
     <button button type="button" mat-raised-button color="primary" class="enviarbutton" (click)="contactForm()"><div class="div1">Enviar</div><div class="div2"><mat-icon>send</mat-icon></div></button>
    <a *ngIf="fileURL" [href]="fileURL" download="file.pdf">Descarga</a>
  </div>
  </mat-step>
  <mat-step>
    <ng-template matStepLabel>Listo</ng-template>
    <p>Listo.</p>
    <div>
      <button mat-raised-button color="primary" (click)="stepper.reset()">Firmar otro PDF</button>
    </div>
  </mat-step>
</mat-horizontal-stepper>

В ts-коде я также использую ViewChild для доступа к степперу следующим образом: 

@ViewChild('stepper',{static:true}) private myStepper: MatStepper;

Так что я могу программно использовать this.myStepper.next();

Я не вижу ошибок в коде, я идентифицирую степпер как #stepper в html и использую его соответственно. Код работал, но с учетом недавних изменений этого компонента, упомянутых выше, я не знаю, могут ли они каким-либо образом повлиять на компоненты.

...