组件绑定不起作用

我有一个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; 
}

来源

2016-08-02 Kyle W

同事帮我找到它。 .ts文件中的address属性与.html文件中的address名称冲突，因此它看起来是错误的。

来源

2016-08-02 19:53:25

组件绑定不起作用

回答

相关问题