2016-08-02 3 views
0

У меня есть компонент address, компонент combinedAddress и компонент, который их вызывает. По какой-то причине привязка модели не попадает в компонент address.Компонент не работает

тока отладки HTML в космическом компоненте - улица отображает заполняемых значение 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 для combinedAddress - уличные дисплеи уже заполнена стоимости 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 для address компонент - Название отображается, но адресная строка ничего не отображает. Если вы вводите текстовое поле адреса, адрес обновляется.

<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 для 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; 
} 

ответ

0

Коллега помогла мне найти его. Свойство address в файле .ts противоречило с именем address в файле .html, поэтому он искал неправильную вещь.

Смежные вопросы