Question

我有两个代表时间间隔的引导日期选择器（一个是开始日期，另一个是结束日期）。我将这两个日期与ngModel捆绑在一起：

 <td>
                    {{'STARTDATE'|translate}}
                    <datepicker [(ngModel)]="StartDate" name="StartDate" [showWeeks]="false" (ngModelChange)="setEndDate()"></datepicker>
                </td>
                <td>
                    {{'ENDDATE'|translate}}
                    <datepicker [(ngModel)]="EndDate" name="EndDate" [showWeeks]="false" (ngModelChange)="setStartDate()"></datepicker>

                </td>

当我更改开始日期时，必须更改结束日期，反之亦然，具体取决于所选的时间间隔（例如：一天，一周，一个月等）。日期在setEndDate和SetStartDate方法中更新。

问题是当一个变量被改变时另一个变量被改变两次。有什么提示吗？

更新：以下是日期设置功能：

setEndDate() {
    var datediffcardinal: number = this.checkDateDiff()
    this.EndDate = new Date()
    this.EndDate.setDate(this.StartDate.getDate() + datediffcardinal)
    console.log("End")
    console.log(this.EndDate)
}

setStartDate() {
    var datediffcardinal: number = this.checkDateDiff()
    this.StartDate = new Date();
    this.StartDate.setDate(this.EndDate.getDate() - datediffcardinal)
    console.log("Start")
    console.log(this.StartDate)
}

checkDateDiff() {
    var end = Date.parse(this.wallboard.endDate.toString())
    var start = Date.parse(this.wallboard.startDate.toString())
    var diff = end - start
    var days: number = Math.floor(diff / (1000 * 60 * 60 * 24)) + 1
    return days;
}

Answer 1

您需要在[(myProperty)]和[myproperty] + (mypropertyChange)组合之间进行选择。

这是错误的：

<datepicker [(ngModel)]="StartDate" name="StartDate" [showWeeks]="false" (ngModelChange)="setEndDate()"></datepicker>

这很好：

<datepicker [ngModel]="StartDate" name="StartDate" [showWeeks]="false" (ngModelChange)="updateStartDate($event)"></datepicker>

updateStartDate(date){
    this.StartDate = date;
    this.setEndDate();
}

避免Angular 2双向双向绑定

1 个答案: