Question

enter image description here 我正在使用angular 4，我正在尝试添加datepicker datepicker-popup.html我遇到了错误。我没有得到哪种错误请帮帮我。

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没有将exportAs属性设置为ngbDatepicker。

您应该打开组件并查看exportAs的实际值，并使用它代替当前的模板变量。

编辑

鉴于您使用的是Bootstrap datepicker（根据日期选择器的名称推断），这是组件装饰器：

@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中：

structure(list(Group_ID = structure(1:28, .Label = c("Group1_10", 
"Group1_13", "Group1_15", "Group1_2", "Group1_20", "Group1_26", 
"Group1_27", "Group1_3", "Group1_6", "Group1_8", "Group2_1", 
"Group2_12", "Group2_14", "Group2_16", "Group2_21", "Group2_23", 
"Group2_25", "Group2_28", "Group2_7", "Group2_9", "Group3_11", 
"Group3_17", "Group3_18", "Group3_19", "Group3_24", "Group3_4", 
"Group3_5", "Group3_6"), class = "factor"), Test1 = c(1.44, 4.36, 
0.75, 0.59, 1.67, 0.41, 2.42, 0.57, 0.89, 0.45, 0.31, 1.56, 2.13, 
0.86, 0.12, 0.26, 1.47, 2.64, 3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 
1.43, 2.58, 2.49, 2.64), Test2 = c(1.44, 4.36, 0.75, 0.59, 1.67, 
0.41, 2.42, 0.57, 0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 0.26, 
1.47, 2.64, 3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 2.49, 
2.64), Test3 = c(1.44, 4.36, 0.75, 0.59, 1.67, 0.41, 2.42, 0.57, 
0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 0.26, 1.47, 2.64, 3.92, 
2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 2.49, 2.64), Test4 = c(1.44, 
4.36, 0.75, 0.59, 1.67, 0.41, 2.42, 0.57, 0.89, 0.45, 0.31, 1.56, 
2.13, 0.86, 0.12, 0.26, 1.47, 2.64, 3.92, 2.19, 0.43, 0.98, 1.93, 
1.49, 1.43, 2.58, 2.49, 0.31), Test5 = c(1.44, 4.36, 0.75, 0.59, 
1.67, 0.41, 2.42, 0.57, 0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 
0.26, 1.47, 2.64, 3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 
2.49, 0.31), Test6 = c(1.44, 4.36, 0.75, 0.59, 1.67, 0.41, 2.42, 
0.57, 0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 0.26, 1.47, 2.64, 
3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 2.49, 0.31), 
    Test7 = c(1.44, 4.36, 0.75, 0.59, 1.67, 0.41, 2.42, 0.57, 
    0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 0.26, 1.47, 2.64, 
    3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 2.49, 1.49
    ), Test8 = c(1.44, 4.36, 0.75, 0.59, 1.67, 0.41, 2.42, 0.57, 
    0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 0.26, 1.47, 2.64, 
    3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 2.49, 1.49
    ), Test9 = c(1.44, 4.36, 0.75, 0.59, 1.67, 0.41, 2.42, 0.57, 
    0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 0.26, 1.47, 2.64, 
    3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 2.49, 1.49
    ), Test10 = c(1.44, 4.36, 0.75, 0.59, 1.67, 0.41, 2.42, 0.57, 
    0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 0.26, 1.47, 2.64, 
    3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 2.49, 3.92
    ), Test11 = c(1.44, 4.36, 0.75, 0.59, 1.67, 0.41, 2.42, 0.57, 
    0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 0.26, 1.47, 2.64, 
    3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 2.49, 3.92
    ), Test12 = c(1.44, 4.36, 0.75, 0.59, 1.67, 0.41, 2.42, 0.57, 
    0.89, 0.45, 0.31, 1.56, 2.13, 0.86, 0.12, 0.26, 1.47, 2.64, 
    3.92, 2.19, 0.43, 0.98, 1.93, 1.49, 1.43, 2.58, 2.49, 3.92
    )), class = "data.frame", row.names = c(NA, -28L))

在TS中：

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

Answer 5

在我的项目中，问题是我使用的是 Angular 7，所以 ng-bootstrap 的版本是 4.x.x。

许多 ngb 模块仅适用于 ngb 版本 6 及更高版本。

没有将“ exportAs”设置为“ ngbDatepicker”的指令

5 个答案:

编辑

编辑2