在循环ng-bootstrap中关闭datepicker

import { Component, OnInit } from '@angular/core';
import { NgbDateStruct, NgbCalendar } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  date: NgbDateStruct;
  showDatePicker: boolean = false;

  constructor(private calendar: NgbCalendar) { }

  ngOnInit() {
  }

  toggleDatePicker() {
    this.showDatePicker = !this.showDatePicker;
  }

  closeDatePicker() {
    this.showDatePicker = false;
  }
}

<div *ngFor="let item of items">
  <input type="text" [(ngModel)]="item.date" (click)="toggleDatePicker()" readonly>
  <ngb-datepicker #dp [(ngModel)]="item.date" (ngModelChange)="closeDatePicker()" *ngIf="showDatePicker"></ngb-datepicker>
  <button (click)="dp.toggle()" type="button" class="btn btn-outline-secondary calendar-icon" (click)="toggleDatePicker()"></button>
</div>