Question

我有一个address组件，一个combinedAddress组件和一个调用它们的组件。由于某种原因，模型绑定没有进入address组件。

当前调试外部组件中的HTML - street显示预先填充的值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>

combinedAddress的HTML - 街道显示预先填充的值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>

address组件的HTML - 显示标题，但地址行不显示任何内容。如果您输入地址文本框，则地址会更新。

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

address组件的TS

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帮助我找到了它。 address文件中的.ts属性与address文件中的.html名称冲突，因此它看错了。

组件绑定不起作用

1 个答案: