父组件值不会因其子组件而更改

时间:2017-07-17 11:29:00

标签: angular typescript

datepicker - https://plnkr.co/edit/4mLtl6?p=preview

 <datepicker [id]="'create-invoice-invoice-date'" [(value)]="duedate"></datepicker>

我已将“duedate”传递给datepicker,但在我的应用程序组件中,我没有得到更改反射。

2 个答案:

答案 0 :(得分:1)

尝试添加(change)="function(data){...}而不是[(值)]。但是,您可以使用输入类型日期。

如果您真的想要双向数据绑定,则应该在datepicker组件中包含:

 @Input() value: string;

然后是发射器:

@Output() valueChange = new EventEmitter<string>();

当值改变时,发出事件。

答案 1 :(得分:1)

你不能在Angular中编写事件处理逻辑来绑定输出 - 这是因为“双向绑定”是作为单向数据绑定+事件绑定实现的,因为这样可以避免“real”的实际性能成本< / em>双向数据绑定(这是AngularJS的性能问题之一)。

然而,使用get&amp; set方法。使用您的示例(请注意我已将输入参数从 value 重命名为 invoiceDate ),您需要添加以下代码。请特别注意为获取和设置invoiceDate而建立的方法 - 这使我们能够emit()向所有外部观察者invoiceDateValue私有本地变量private invoiceDateValue: string = ""; @Output() invoiceDateChange = new EventEmitter(); @Input() get invoiceDate() { return this.invoiceDateValue; } set invoiceDate(val) { this.invoiceDateValue = val; this.invoiceDateChange.emit(this.invoiceDateValue); } 的值。

Name    Account Contribution
Melkiyah    @admiralm1      250
Adinoe      @adonas1        744319
Adino       @adonas1        203431
Isha        @aevalia        0
Karu        @Afmec          102069
Xar'Rynn    @agent13ozrealx 8915424
Ozreal      @agent13ozrealx 23700016
Xan' Dara   @agent13ozrealx 5558739
Elle Dax    @agent13ozrealx 3400634
Zaffira     @agent13ozrealx 1180483

以下是完整的内容:https://plnkr.co/edit/WBdmUp?p=preview