angular - 如何解决错误上下文在离子/角度中调试上下文

问题描述

嗨，我正在使用 ionic 4 和 angular 8，我尝试制作一个电子商务应用程序，当我尝试加载客户地址的地址页簿时，我遇到了两个错误，我不明白它来自哪里，所以我把它放在下面控制台的堆栈跟踪，如果有人可以帮助我，我正在 chrome 中运行我的应用程序，这将有助于我继续

我把相关文件放在下面

addressViewPage.html

  <ion-header class="header-bg">
  <ion-toolbar mode="ios">
    <ion-buttons>
      <ion-back-button defaultHref="/address-book" color="light"></ion-back-button>
    </ion-buttons>
    <ion-title color="light">Address view</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" color="light">
  <ion-grid>
    <ion-row class="logo-row">
      <ion-col class="ion-no-padding">
        <ion-img src="../assets/images/delivery.PNG"></ion-img>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col size-md="6" offset-md="3">
        <form [formGroup]="addressForm" (ngSubmit)="onEditAddress()">
          <ion-card>
            <ion-card-header>
              <ion-item-divider>
                Address Details
              </ion-item-divider>
            </ion-card-header>
            <ion-card-content>
              <ion-list>
                <div class="aligns-div">
                  <div class="form-group">
                    <ion-label>First Name</ion-label>
                    <ion-input type="text" [(ngModel)]="address.firstName" formControlName="firstName" class="form-control" ></ion-input>
                  </div>
                  <div class="form-group">
                    <ion-label>Last Name</ion-label>
                    <ion-input type="text" [(ngModel)]="address.lastName" formControlName="lastName" class="form-control" ></ion-input>
                  </div>
                </div>
                <div class="form-group">
                  <ion-label>street Address</ion-label>
                  <ion-input type="text" class="form-control" [(ngModel)]="address.street" formControlName="street"></ion-input>
                </div>
                <div class="form-group">
                  <ion-label>City</ion-label>
                  <ion-input type="text" [(ngModel)]="address.city" formControlName="city" class="form-control"></ion-input>
                </div>
                <div class="form-group">
                  <ion-label>Country</ion-label>
                  <ion-input type="text" [(ngModel)]="address.country" formControlName="country" class="form-control"></ion-input>
                </div>
                <div class="form-group">
                  <ion-label>Code Postal</ion-label>
                  <ion-input type="text" [(ngModel)]="address.zipCode" formControlName="zipCode" class="form-control"></ion-input>
                </div>
                <div class="form-group">
                  <ion-label>Numéro de téléphone</ion-label>
                  <div class="form-inline">
                    <ion-select value="216" formControlName="codeArea">
                      <ion-select-option value="216">+216</ion-select-option>
                      <ion-select-option value="242">+242</ion-select-option>
                      <ion-select-option>+337</ion-select-option>
                    </ion-select>
                    <ion-input type="text" [(ngModel)]="address.cellNumber" formControlName="cellNumber" class="form-control"></ion-input>
                  </div>
                </div>
              </ion-list>
            </ion-card-content>
          </ion-card>
          <div class="form-group ion-text-center">
            <ion-button color="success" type="submit">Save</ion-button>
          </div>
        </form>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

addressViewPage.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Address} from '../../models/address.model';
import {UserService} from '../../services/auth/user.service';
import {User} from '../../models/user.model';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';

@Component({
  selector: 'app-address-view',
  templateUrl: './address-view.page.html',
  styleUrls: ['./address-view.page.scss'],
})
export class AddressViewPage implements OnInit {
  addressId: number;
  user: User;
  addressForm: FormGroup;
  address: Address;
  constructor(private route: ActivatedRoute,
              private userService: UserService,
              private formBuilder: FormBuilder) {
      this.addressId = this.route.snapshot.params.id;
      this.user = this.userService.getAuthenticatedUser();
      console.log(this.user);
      this.userService.getSingleAddress(this.addressId).subscribe(
          res => {
              this.address = res;
              this.address.firstName = this.user.firstName;
              this.address.lastName = this.user.lastName;
              this.address.cellNumber = this.user.cellNumber;
              console.log(this.address, 'here address-view go edit');
          }
      );
      console.log(this.address, 'here');
  }

  ngOnInit() {
      this.initForm();
  }
    /*
    *
  getSelectAddress(id: number, user: User) {
     this.userService.getSingleAddress(id).then(
          res => {
              res.subscribe(
                  adr => {
                      this.address = adr;
                      this.address.firstName = user.firstName;
                      this.address.lastName = user.lastName;
                      this.address.cellNumber = user.cellNumber;
                      console.log(this.address, 'in the function');
                  },
                  err => {
                      console.log('failed to load address' + err);
                  }
              );
          }
      );
     console.log(this.address);
  }*/

  initForm() {
      this.addressForm = this.formBuilder.group({
          firstName: ['', [Validators.required]],
          lastName: ['', [Validators.required]],
          street: ['', [Validators.required]],
          city: ['', [Validators.required]],
          country: ['', [Validators.required]],
          zipCode: ['', [Validators.required]],
          codeArea: ['', [Validators.required]],
          cellNumber: ['', [Validators.required]]
      });
  }

  onEditAddress() {}
}

我有一个奇怪的行为，我从服务器检索的地址被检索得很好，但它在 html 页面中未定义，我不知道为什么

标签： angular

angular - 如何解决错误上下文在离子/角度中调试上下文

问题描述

解决方案

推荐阅读