伙计们,我真的疯了,要正确处理角度生命周期钩子。我不知道我在哪里弄错了。我试着读了很多东西,从现在起一个星期左右,我一直在努力阅读。

我有相当多的服务器api调用和一些业务逻辑,我正在应用 RegisterationComponent.html:82 ERROR TypeError: Cannot read property 'titleId' of undefined . 其他时候,我正努力正确初始化一个向导。

恩戈尼尼特()

ngOnInit() {
    //First see if it is a redirect request:
    this.route.queryParamMap
    .pipe(
      map(params => params.get('payment')),
      filter(paramVal => paramVal != null),
      filter(paramVal => paramVal == 'success'),
      tap((paymentInd: string) => {
        this.setOrderDetails();
      }),
      untilDestroyed(this)
    ).subscribe((successPayment: string) => {
      //Update the transaction here

      this.regService.updateTransaction(this.registrationTransactionDetails)
      .pipe(
        filter((regUpdate: RegistrationTransaction) => regUpdate != null),
        tap((regUpdate: RegistrationTransaction) => {
          //This is so that user sees the correct template.
          this.showRegConfirmation = true;
          this.showConfirmation = false;
          
          this.wizard = new KTWizard(this.el.nativeElement, {
            startStep: 2
          });

          this.initializeWizardEvents();

          JsBarcode('#barcode', regUpdate.order.orderLine.barcode);
        }),
        untilDestroyed(this)
      )
      .subscribe((regUpdate: RegistrationTransaction) => {
        //Update the user details
        
        this._profileService.updateUser(this.userDetails.id, this.userDetails).subscribe();
      });
    });

    //fresh transaction case
    this.route.queryParamMap
    .pipe(
      map(params => params.get('payment')),
      filter(param => param == null),
      tap((paymentInd: string) => {
        this.setOrderDetails();

        //this is to make sure user sees the correct template even after refresh
        this.showConfirmation = true;
        this.showRegConfirmation = false;
      }),
      filter(id => this.registrationTransactionDetails.id == null),
      untilDestroyed(this)
    )
    .subscribe((paymentInd: string) => {
      this.regService
        .createTransaction(this.registrationTransactionDetails)
        .pipe(
          filter(regCreated => regCreated.id != null),
          tap((regCreated: RegistrationTransaction) => {
            if(!this._utilities.isNullOrUndefined(regCreated.id)){

              this.wizard = new KTWizard(this.el.nativeElement, {
                startStep: 1
              });

              this.initializeWizardEvents();

              
                                            
              this.regService
              .getSessionDetails(regCreated.eventId, regCreated.order.id)
              .pipe(
                tap((response: SessionResponse) => {
                  //Just so that we can update the registration details with the gateway order id as well.
                  this.registrationTransactionDetails = JSON.parse(this.storage.getItem(Constants.RegistrationStorageKey));
                  this.registrationTransactionDetails.gatewayOrderId = response.gatewayOrderId;

                  this.storage.setItem(Constants.RegistrationStorageKey, JSON.stringify(this.registrationTransactionDetails));

                }),
                untilDestroyed(this)
                )
              .subscribe((response: SessionResponse) => {
                console.log(response);

                this.gatewayConfig.session = response.session;
                this.gatewayConfig.callbacks = this.callback;

                Checkout.configure(this.gatewayConfig);
              });
            }
          }),
          untilDestroyed(this)
          )
        .subscribe((regCreated: RegistrationTransaction) => {
          
          this.registrationTransactionDetails = JSON.parse(this.storage.getItem(Constants.RegistrationStorageKey));
          
          //Save all the details fo the registration created.
          this.registrationTransactionDetails.id = regCreated.id;
          this.registrationTransactionDetails.order.id = regCreated.order.id;
          this.registrationTransactionDetails.order.orderLine.id = regCreated.order.orderLine.id;

          this.storage.setItem(
            Constants.RegistrationStorageKey,
            JSON.stringify(this.registrationTransactionDetails)
          );
        });     
    });

    this.regService
      .getCommonValues()
      .pipe(
        filter(list => list != null),
        tap((list: CommonLists) =>{
          this.filteredCities = _.filter(list.cities, { countryCode: this.userDetails.countryCode });
        }),
        untilDestroyed(this)
        )
      .subscribe((lists: CommonLists) => {
        this.countries = lists.countries;
        this.titles = lists.titles;
        this.genders = lists.genders;
        this.cities = lists.cities;
        this.jobFunctions = lists.jobFunctions;
        this.jobTitles = lists.jobTitles;
      });

  }

ngAfterViewInit(): void {
    // Initialize form wizard
    //let wizard;
    
    if(this.showRegConfirmation && !this.showConfirmation)
    {
      this.wizard = new KTWizard(this.el.nativeElement, {
        startStep: 3
      });
    }
    else
    {
      this.wizard = new KTWizard(this.el.nativeElement, {
        startStep: 2
      });
    }
    

    // Validation before going to next page
    this.wizard.on('beforeNext', wizardObj => {
      // https://angular.io/guide/forms
      // https://angular.io/guide/form-validation
      // validate the form and use below function to stop the wizard's step
      // wizardObj.stop();
      this.onBeforeNext(wizardObj);
    });

    this.wizard.on('beforePrev', wizardObj => {
      // https://angular.io/guide/forms
      // https://angular.io/guide/form-validation
      // validate the form and use below function to stop the wizard's step
      // wizardObj.stop();
      this.onBeforePrev(wizardObj);
    });

    // Change event
    this.wizard.on('change', wizard => {
      setTimeout(() => {
        KTUtil.scrollTop();
      }, 500);
    });
  }

现在必须在ngAfterViewInit中初始化此向导。我试过在恩戈尼尼特做过,但没用。事件不起作用。

this.wizard = new KTWizard(this.el.nativeElement, {
                startStep: 2
              });
    
              this.initializeWizardEvents();

此外,你们都可以找到这一行: this.setOrderDetails()

R注册组件.html投料错误

<!--begin: Form Wizard Step 2-->
          <div class="kt-wizard-v3__content" data-ktwizard-type="step-content" data-ktwizard-state="current">
            <div class="kt-form__section kt-form__section--first">
              <!-- <ng-template #loggedIn> -->
              <div class="kt-wizard-v3__form">
                <div class="wizard-title-area">
                  <p class="para">
                    <span class="name">Hi {{ userDetails.firstName }}, </span>You have logged in using your social
                    account. <a href="#">Click here</a> if this is not the correct information.
                  </p>
                </div>
                <div class="kt-separator kt-separator--border-2x separator-margin-top-0"></div>
                <form #userForm="ngForm">
                  <div class="form-input-wrap">
                    <div class="row">
                      <div class="col-sm-2">
                        <div class="form-group">
                          <mat-form-field>
                            <mat-select
                              id="prefix"
                              name="prefix"
                              placeholder="prefix"
                              [(ngModel)]="userDetails.titleId"
                              name="userTitle"
                              id="userTitle"
                              required
                            >
                              <mat-option *ngFor="let title of titles" [value]="title.id">{{
                                title.description
                              }}</mat-option>
                            </mat-select>
                          </mat-form-field>
                          <!-- <div
                            *ngIf="userTitle.invalid && (userTitle.dirty || userTitle.touched)"
                            class="alert alert-danger"
                          >
                            <div *ngIf="userTitle.errors.required">
                              Please select a Title
                            </div>
                          </div> -->
                        </div>
                      </div>
                      <div class="col-sm-4">
                        <div class="form-group">
                          <mat-form-field>
                            <input
                              matInput
                              #input
                              maxlength="20"
                              placeholder="First Name"
                              required
                              [(ngModel)]="userDetails.firstName"
                              [ngModelOptions]="{ standalone: true }"
                            />
                          </mat-form-field>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                            <input
                              matInput
                              #input
                              maxlength="20"
                              placeholder="Last Name"
                              required
                              [(ngModel)]="userDetails.lastName"
                              [ngModelOptions]="{ standalone: true }"
                            />
                          </mat-form-field>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="form-input-wrap">
                    <div class="row">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                            <input
                              matInput
                              type="email"
                              #input
                              maxlength="20"
                              placeholder="email"
                              required
                              [(ngModel)]="userDetails.email"
                              [ngModelOptions]="{ standalone: true }"
                            />
                          </mat-form-field>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                            <mat-select
                              id="gender"
                              name="gender"
                              placeholder="gender"
                              [(ngModel)]="userDetails.genderId"
                              aria-required="true"
                              [ngModelOptions]="{ standalone: true }"
                            >
                              <mat-option *ngFor="let gender of genders" [value]="gender.id">{{
                                gender.alias
                              }}</mat-option>
                            </mat-select>
                          </mat-form-field>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="form-input-wrap">
                    <div class="row">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                              <mat-label>Select your nationality</mat-label>

                            <mat-select
                              placeholder="nationality"
                              [(ngModel)]="userDetails.nationalityCode"
                              [ngModelOptions]="{ standalone: true }"
                            >
                              <mat-option *ngFor="let country of countries" [value]="country.code">{{
                                country.name
                              }}</mat-option>
                            </mat-select>
                          </mat-form-field>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                              <mat-label>Select the country of residence</mat-label>
                            <mat-select
                              placeholder="country"
                              [(ngModel)]="userDetails.countryCode"
                              [ngModelOptions]="{ standalone: true }"
                              (selectionChange)="onCountryChange()"
                            >
                              <mat-option *ngFor="let country of countries" [value]="country.code">{{
                                country.name
                              }}</mat-option>
                            </mat-select>
                          </mat-form-field>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="form-input-wrap">
                    <div class="row">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                            <mat-label>Select a job function</mat-label>
                            <mat-select
                              matInput
                              id="userJobFunction"
                              name="userJobFunction"
                              placeholder="job function"
                              [(ngModel)]="userDetails.jobFunctionId"
                              required
                              #userJobFunction="ngModel"
                            >
                              <mat-option *ngFor="let function of jobFunctions" [value]="function.id">{{
                                function.name
                              }}</mat-option>
                            </mat-select>
      
                            <mat-error *ngIf="userJobFunction.hasError('required')">
                                Please select a job function.
                            </mat-error>
      
                          </mat-form-field>
                        </div>
                      </div>
                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                            <mat-label>Select a job title</mat-label>
                            <mat-select
                              matInput
                              id="userJobTitle"
                              name="userJobTitle"
                              placeholder="job title"
                              [(ngModel)]="userDetails.jobTitleId"
                              required
                              #userJobTitle="ngModel"
                            >
                              <mat-option *ngFor="let jobTitle of jobTitles" [value]="jobTitle.id">{{
                                jobTitle.name
                              }}</mat-option>
                            </mat-select>
                            <mat-error *ngIf="userJobTitle.hasError('required')">
                                Please select a job title.
                            </mat-error>
                          </mat-form-field>
                        </div>
                      </div>
                    </div>
                  </div>


                  <div class="form-input-wrap">
                    <div class="row">
                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                            <input
                              matInput
                              type="text"
                              #input
                              maxlength="20"
                              placeholder="phone"
                              required
                              [(ngModel)]="userDetails.mobile"
                              [ngModelOptions]="{ standalone: true }"
                            />
                          </mat-form-field>
                        </div>
                      </div>
                      
                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                            <mat-label>Select a city</mat-label>
                            <mat-select
                              matInput
                              id="userCity"
                              name="userCity"
                              placeholder="city"
                              [(ngModel)]="userDetails.city"
                              required
                              #userCity="ngModel"
                            >
                              <mat-option *ngFor="let city of filteredCities" [value]="city.id">
                                {{ city.name }}
                              </mat-option>
                            </mat-select>
      
                            <mat-error *ngIf="userCity.hasError('required')">
                                Please select a city.
                              </mat-error>
      
                          </mat-form-field>
                        </div>
                      </div>

                    </div>
                  </div>

                  <div class="form-input-wrap">
                    <div class="row">
                      <div class="col-sm-6">
                        <div class="form-group">

                          <mat-form-field>
                            <input matInput [matDatepicker]="userDOB" [max]="maxDate" id="userDOB" name="userDOB" placeholder="Date of Birth" [(ngModel)]="userDetails.userDOB"
                            [ngModelOptions]="{ standalone: true }">
                            <mat-datepicker-toggle matSuffix [for]="userDOB"></mat-datepicker-toggle>
                            <mat-datepicker #userDOB disabled="false"></mat-datepicker>
                          </mat-form-field>
                        </div>
                      </div>

                      <div class="col-sm-6">
                        <div class="form-group">
                          <mat-form-field>
                            <input
                              matInput
                              type="text"
                              #input
                              maxlength="20"
                              placeholder="company"
                              [(ngModel)]="registrationTransactionDetails.companyName"
                              [ngModelOptions]="{ standalone: true }"
                            />
                          </mat-form-field>
                        </div>
                      </div>
                    </div>
                  </div>                  
                </form>
              </div>
              <!-- </ng-template> -->
            </div>
          </div>
          <!--end: Form Wizard Step 2-->

任何帮助都将不胜感激。谢谢您!