コンポーネントバインドが機能しない

Question

私はaddressコンポーネント、combinedAddressコンポーネント、およびこれらを呼び出すコンポーネントを持っています。何らかの理由で、モデルバインディングがaddressコンポーネントに入らない。外側部品で

現在のデバッグHTML - ストリート123のあらかじめ設定値表示：タイトル - ： - addressコンポーネントの

<div> 
    CombinedAddress: {{physicalAddress.street}}, {{mailingAddress.street}} 
    <div> 
     <address-component name="physicalAddress" [(address)]='physicalAddress' Title="Physical Address"></address-component> 
    </div> 
    <div *ngIf="isMailingAddressRequired()"> 
     <address-component name="mailingAddress" [(address)]="mailingAddress" Title="Mailing Address"></address-component> 
    </div> 
</div> 

HTML combinedAddressため

Entity: {{application.entity.physicalAddress.street}} 
<combinedAddress-component [(physicalAddress)]="application.entity.physicalAddress" [(mailingAddress)]="application.entity.mailingAddress" ></combinedAddress-component> 
<address-component name="something" [(address)]="application.entity.physicalAddress" Title="Something"></address-component> 

HTMLを通りディスプレイ123の値を事前移入表示されますが、アドレス行には何も表示されません。アドレスのテキストボックスに入力すると、アドレスが更新されます。同僚は私がそれを見つける助けaddressコンポーネント

import { Component, Input, ElementRef} from '@angular/core'; 
import { Address } from '../../models/Address'; 
import { StateComponent } from './states.component'; 
let $ = require('../../../../../../node_modules/jquery/dist/jquery.min.js'); 

@Component({ 
    selector: 'address-component', 
    templateUrl: 'app/views/reusables/address.component.html', 
    styleUrls: ['app/form/reusables/composite.component.css'], 
    directives: [StateComponent] 
}) 
export class AddressComponent{ 
    @Input() 
    Title: String; 

    @Input() 
    address: Address; 
} 

Answer 1

ため

<div class="well"> 
    <fieldset> 
     Address: {{address.street}} 
     <legend>{{Title}}</legend> 
     <div class="form-group"> 
      <label for="address">Address</label> 
      <input name="address" class="form-control" [(ngModel)]="address.street" required placeholder="Address" #address="ngModel" /> 
      <div *ngIf="address.dirty && !address.valid" class="error">* </div> 
     </div> 

     <div class="form-group"> 
      <label for="city">City</label> 
      <input name="city" class="form-control" [(ngModel)]="address.city" placeholder="City" #city="ngModel" /> 
      <div *ngIf="city.dirty && !city.valid" class="error">*</div> 
     </div> 

     <state-select [(selectedState)]="address.state" Title="State"></state-select> 

     <div class="form-group"> 
      <label for="zip">Zip Code</label> 
      <input name="zip" class="form-control" [(ngModel)]="address.zip" placeholder="Zip Code" #zip="ngModel" /> 
      <div *ngIf="zip.dirty && !zip.valid" class="error">*</div> 
     </div> 
    </fieldset> 
</div> 

とTS。 .tsファイルのaddressプロパティが.htmlファイルのaddressという名前と競合していたため、間違ったことが考えられました。