沒有將“exportAs”設置為“ngbDatepicker”的指令

Question

我正在使用 angular 4，我試圖在使用 datepicker-popup.html 時添加 datepicker 我收到如下錯誤。 我不明白這是什么類型的錯誤。 請幫幫我。

datepicker-popup.html

<form class="form-inline">
    <div class="form-group">
        <div class="input-group">
            <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary" (click)="d.toggle()" type="button">
                    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;" />
                </button>
            </div>
        </div>
    </div>
</form>

<hr/>
<pre>Model: {{ model | json }}</pre>

Answer 1

請在您的文件中添加這兩行。

 import { NgbDate, NgbModule } from '@ng-bootstrap/ng-bootstrap';

並導入 NgbModule。

 imports: [NgbModule]

Answer 2

這個錯誤意味着#d="ngbDatepicker"無效，因為庫的DatePickerComponent沒有設置為ngbDatepicker的exportAs屬性。

您應該打開組件並查看exportAs的實際值，並使用它代替您當前的模板變量。

編輯

鑒於您使用的是Bootstrap 日期選擇器（根據您的日期選擇器的名稱推斷），這里是組件裝飾器：

@Component({
  selector: 'ngbd-datepicker',
  template: `...`
})

如您所見，沒有exportAs指令：這意味着您不能編寫#d="ngbDatepicker" 。

（如果您不使用那個，請考慮將其視為了解組件是否具有exportAs屬性的方法）

編輯 2

要解決這個問題：聲明一個模板變量並將其聲明為視圖子引用

<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker>

@ViewChild(NgbdDatepicker) d: NgbdDatepicker;

這應該有效。 如果您有多個日期選擇器，請為它們命名以便找到它們：

<input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker #d>

@ViewChild('d', { read: NgbdDatepicker }) d: NgbdDatepicker;

Answer 3

這些方法在上面的最新 angular 版本 (6.0) 中已被棄用。

Answer 4

我找到了這個解決方案：

在 HTML 中：

<input class="form-control" placeholder="yyyy-mm-dd" name="dp" formControlName="dp" ngbDatepicker>

在 TS 中：

@ViewChild('NgbdDatepicker') d: NgbDateStruct;

Answer 5

在我的項目中，問題是我使用的是 Angular 7，所以 ng-bootstrap 的版本是 4.xx

許多 ngb 模塊僅適用於 ngb 版本 6 及更高版本。