組件綁定不起作用

我有一個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

組件綁定不起作用

回答

相關問題