angular - 等待信息的角垫步进延迟

Question

我有一个调用服务来检索数据的组件。这是该组件的一部分：

getHardwareCheckInfosOne(serial){
    console.log(serial);
    this.hardwareCheckService.readOne(serial).subscribe((hardwareInfos: HardwareInfos[]) => {
    const arr = []
    arr.push(hardwareInfos);
    
    this.type = arr[0].type;
    this.payload_hex = arr[0].payload_hex;
    this.measure = arr[0].measure;
    this.Time = arr[0].Time;
    this.DevEUI = arr[0].DevEUI;
    this.IdCiterne = arr[0].IdCiterne;
    this.ShipTo = arr[0].ShipTo;
    this.Address = arr[0].Address;
    this.Signal = arr[0].Signal;
    this.serial_number = arr[0].serial_number;
    this.Battery = arr[0].Battery;
    this.brand = arr[0].brand;
    this.device_version = arr[0].device_version;
    this.connectivity = arr[0].connectivity;
    this.date_entry_stock = arr[0].date_entry_stock;
    this.date_install = arr[0].date_install;
    this.installer = arr[0].installer;
    this.status = arr[0].status;
    this.result = arr[0].result;
    this.Battery_OKO = arr[0].Battery_OKO;
    this.GSM_quality = arr[0].GSM_quality;
    this.radio_quality = arr[0].radio_quality;
    this.serial_OKO = arr[0].serial_OKO;

    console.log(this.DevEUI);

    this.TankDetailsService.getTechnician(this.installer).subscribe((Technician: Technician[]) => {
       this.NomTech = Technician[0].NomTech;
         });

    });
    
  }

检索到的数据必须显示在我的表单的一个步骤中。这是我表格的第二步（最后一步）：

<mat-step [stepControl]="confirmFormGroup">
        <form [formGroup]="confirmFormGroup">
          <ng-template matStepLabel>Hardware Check Report</ng-template>

          <div class="title m-0">Here is the serial for the device {{serial_number}}</div>

          <div class="mt-4" fxLayout="column" fxLayoutGap="8px">
            <mat-checkbox class="checkbox" formControlName="terms">
              etc etc etc. *
            </mat-checkbox>
          </div>

          <div class="actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
            <button color="primary" mat-button matStepperPrevious type="button">PREVIOUS</button>
            
              FINISH
            </button>
          </div>
        </form>

      </mat-step>

问题是数据是在步骤初始化之后出现的，我必须转到上一个和下一个才能查看该数据。
步进器是否存在等待数据的延迟，或者我可能不是这样做的好方法？
提前感谢您帮助 Angular 初学者。

编辑 1
这是我表格的第一步。当我点击下一个按钮时，函数 getHardwareCheckInfosOne 被初始化：

<mat-step [stepControl]="deviceInfos">
        <form [formGroup]="deviceInfos">
          <ng-template matStepLabel>Device Informations</ng-template>

          <h2 class="title m-0">Device Informations</h2>
          <div class="subheading-1">Enter the device informations to test it.</div>

          <div class="mt-4" fxLayout="column" fxLayoutGap="8px">
           <mat-form-field class="vex-flex-form-field" fxFlex="auto">
             <mat-label>Select device type</mat-label>
          <mat-select formControlName="deviceType" (selectionChange)="setDeviceType($event)">
   <mat-option *ngFor='let option of deviceTypeOptions' [value]="option">
    {{option}}
    </mat-option>
    </mat-select> 
  </mat-form-field>

 <mat-form-field *ngIf= "deviceSelected === 'AIUT GSM'" fxFlex="auto" >
              <mat-label>Serial OKO</mat-label>
              <input formControlName="serialOKO"  matInput>
              <div *ngIf="deviceInfos.controls.serialOKO.hasError('invalidFormat')">
       <span class="alert">{{ deviceInfos.get('serialOKO').errors.invalidFormat.message}}</span> 
</div>
            </mat-form-field>


    <mat-form-field *ngIf= "deviceSelected" fxFlex="auto">
              <mat-label>Serial</mat-label>
              <input formControlName="serial" matInput>
              <div *ngIf="deviceInfos.controls.serial.hasError('invalidFormat')">
       <span class="alert">{{ deviceInfos.get('serial').errors.invalidFormat.message}}</span> 
</div>
            </mat-form-field>
            
            </div>

            <div class="actions" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
            <button (click)="stepper.reset()" [disabled]="deviceInfos.pristine" color="primary" mat-button
                    type="button">RESET
            </button>

            <button (click)="getHardwareCheckInfosTwo(deviceInfos.get('serial').value, deviceInfos.get('serialOKO').value)" 
            *ngIf= "deviceSelected === 'AIUT GSM'" color="primary" 
            [disabled]="deviceInfos.pristine" mat-raised-button matStepperNext>NEXT
            </button>

            <button  (click)="getHardwareCheckInfosOne(deviceInfos.get('serial').value)"
            *ngIf= "deviceSelected !== 'AIUT GSM'" color="primary" 
            [disabled]="deviceInfos.pristine" mat-raised-button matStepperNext>NEXT
            </button>
          </div>

          </form>
      </mat-step>

标签： angulartypescriptangular-reactive-forms