如何将数据传递给另一个组件Angular 2

Question

我有一个组件加载我用于显示的数据对象并传回svc，但我还需要在用户点击和“编辑地址”链接时使用选择器显示另一个组件。我可以在div中使用静态文本显示组件内容，但是当我尝试从父组件访问数据时，我找不到未定义的属性。

以下函数是我从父组件公开属性的地方：

openAddress(){
  this.openChangeAddress = true;
  this.shippingAddress = this.qrData.ShippingAddress;
  this.billingAddress= this.qrData.BillingAddress;
}

这是我的子组件，我正在尝试访问这些属性。

import { Component, Input } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from '../app.component';

@Component({
selector: 'change-address',
templateUrl: './changeAddress.component.html',
styleUrls: ['./changeAddress.component.css']
})

    export class changeAddress {
    constructor() {}
    @Input('shippingAddress') ShippingAddress:{};
    }

这是我的孩子模板，我确信它很简单，只是在学习Angular 2。

{{ShippingAddress.Street1}} //This says cannot read Street1 of undefined
<div class="col-3">Is This Showing Up?</div> //This displays onClick

这是我添加的父模板

<div class="jumbotron qr-container">
<h1>{{title}}</h1>
  <div class="qr-inner">
  <form [formGroup]="complexForm" (ngSubmit)="findScript(complexForm.value)">
      <h2>Script Number</h2>
      <input type="number" name="script" class="form-control" [(ngModel)]="scriptno" (blur)="getScripts(scriptno)" [formControl]="complexForm.controls['scriptnumber']">
      <h2>Date of birth</h2>
      <input type="date" name="dob" class="form-control" [(ngModel)]="dateofbirth" (blur)="getScripts(scriptno, dateofbirth)" [formControl]="complexForm.controls['dateofbirth']" required>
      <div *ngIf="showDeliveryTypes" name="deliverytypes">
      <h3>Delivery Method</h3>
      <select #select [(ngModel)]="selectedId" (change)="validateDeliveryTypes(select.value)" name="deliveryoptions" [formControl]="complexForm.controls['deliverytype']">
    <option *ngFor="let item of qrData.DeliveryTypes" [value]="item.DeliveryTypeId">{{item.DeliveryTypeName}}</option>

      </select>
      </div>
      <div *ngIf="showPickupLocations" name="pickuptypes">
      <h3>Delivery Method</h3>
      <select #select [(ngModel)]="selectedPickupId" (change)="checkVals(select.value)" name="pickupoptions" [formControl]="complexForm.controls['pickuplocation']">
    <option *ngFor="let item of selectedItem.PickupLocations" [value]="item.PickupLocationId">{{item.PickupLocationName}}</option>

      </select>
      </div>
      <div *ngIf="showPaymentOptions" name="paymentoptions">
      <h3>Payment Types</h3>
      <select #select [(ngModel)]="selectedPayment" (change)="checkVals(select.value)" name="selectpaymentoptions" [formControl]="complexForm.controls['paymentoptions']">
        <option *ngFor="let item of selectedItem.PaymentTypes" [value]="item.PaymentTypeId">{{item.PaymentTypeName}}</option>

      </select>
      </div>
      <button type="submit" name="submitbutton" [disabled]="!complexForm.valid">Find Prescription</button>
  </form>
  <div *ngIf="userMessage">
    <h1>{{userMessage.heading}}</h1>
    <h4>{{userMessage.statusMsg}}</h4>
    <div class="address">
      <p>
        {{qrData.ShippingAddress.Street1}}<br>
        {{qrData.ShippingAddress.Street2}}<br>
        {{qrData.ShippingAddress.State}}<br>
        {{qrData.ShippingAddress.Zip}}
      </p>
      <div (click)="openAddress()">[edit address]</div>
    </div>
    <button *ngIf="userMessage.canDoSubmit">Submit Prescription</button>
  </div>
  </div>
</div>
<change-address *ngIf="openChangeAddress"></change-address> // this loads the child template from above

非常感谢任何帮助。