当它们在循环中时关闭日期选择器 ng-bootstrap

Question

我有两个日期选择器（开始日期和结束日期）在一个循环中。我想在尝试打开结束日期时关闭开始日期日期选择器，反之亦然。我尝试对输入提供不同的引用 (#start, #close)

  <div class="input-group" *ngIf="item.id =='startDate'">
  <input class="form-control" placeholder="{{item.placeholder}}"
         name="dp" [(ngModel)]="item.dateModel" ngbDatepicker #start="ngbDatepicker">
  <button class="input-group-addon" (click)="start.toggle();end.close()" type="button">
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </button>
</div>
  <div class="input-group" *ngIf="item.id =='endDate'">
  <input class="form-control" placeholder="{{item.placeholder}}"
         name="dp" [(ngModel)]="item.dateModel" ngbDatepicker #end="ngbDatepicker">
  <button class="input-group-addon" (click)="end.toggle();start.close()" type="button">

    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </button>
</div>

如果我从输入组中删除 *ngIf 并将其提供给它的父级，它可以工作，但它们都有相同的日期。注意：目前我无法更改输入数据模型。这是模拟我的用例的 plunker http://plnkr.co/edit/ukbt33q7e1uyNNbPh2cN?p=preview

Answer 1

<div  class="tmo-floating-label filterItem"  *ngIf="item.id=='startDate'">
        <div class="input-group" >
          <input   type="text" class="form-control" name="startDate" readonly [(ngModel)]="filterItem.dateModel"  ngbDatepicker #startDate="ngbDatepicker" (ngModelChange)="onChange(filterItem)" placeholder="{{filterItem.placeholder}}">
          <button class=" input-group-addon btn btn-primary" (click)="startDateToggle();"><i class="fa fa-calendar" aria-hidden="true"></i></button>
        </div>
      </div>
      <div  class="tmo-floating-label filterItem" *ngIf="item.id=='endDate'">
        <div class="input-group">
          <input   type="text" class="form-control" name="endDate" readonly [(ngModel)]="filterItem.dateModel"  ngbDatepicker #endDate="ngbDatepicker" (ngModelChange)="onChange(filterItem)" placeholder="{{filterItem.placeholder}}">
          <button class=" input-group-addon btn btn-primary" (click)="endDateToggle();"><i class="fa fa-calendar" aria-hidden="true"></i></button>
        </div>
      </div>

不是在点击时使用切换方法，而是调用 startDateToggle/endDateToggle 并使用其引用关闭另一个日期选择器

    startDateToggle(){
this.startDate.toggle();
this.endDate.close()
}
endDateToggle(){
this.endDate.toggle();
this.startDate.close()
}

当它们在循环中时关闭日期选择器 ng-bootstrap

closing datepicker when they are in loop ng-bootstrap

ng-bootstrap

angular