Komponente Bindung funktioniert nicht

Question

Ich habe eine address Komponente, eine combinedAddress Komponente und eine Komponente, die diese aufruft. Aus irgendeinem Grund gelangt die Modellbindung nicht in die Komponente address.

Aktuelle HTML-Debugging in der äußeren Komponente - Straße zeigt einen vorbelegt Wert von 123:

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 für combinedAddress - Straße zeigt vorbelegt Wert von 123:

<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 für address Komponente - Titel Anzeigen, aber die Adresszeile zeigt nichts an. Wenn Sie das Adressfeld eingeben, wird die Adresse aktualisiert.

<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> 

Und der TS für die address Komponente

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

Coworker hat mir geholfen, es zu finden. Die address-Eigenschaft in der .ts-Datei stand im Konflikt mit dem address-Namen in der Datei .html, so dass es sich um die falsche Sache handelte.