Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/401.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 角度材质2日期选择器关闭事件未执行(角度4)_Javascript_Angular_Datepicker_Angular Material2 - Fatal编程技术网

Javascript 角度材质2日期选择器关闭事件未执行(角度4)

Javascript 角度材质2日期选择器关闭事件未执行(角度4),javascript,angular,datepicker,angular-material2,Javascript,Angular,Datepicker,Angular Material2,我将Angular Material 2日期选择器与Angular 4.x一起使用-当我选择一个日期时,它应该在日期选择器关闭时发出一个函数(当选择一个日期时它关闭)。我基本上希望能够选择一个日期,而不是关闭日期选择器(它应该保持在屏幕上并突出显示所选日期) 这是基于下面的代码,它在stackblitz上运行良好-但出于某种原因,它不在我自己的应用程序中? -注意-stackblitz代码是我遇到的一些通用代码,与下面的代码不同(尽管几乎相同) //组成部分 @Component({ sele

我将Angular Material 2日期选择器与Angular 4.x一起使用-当我选择一个日期时,它应该在日期选择器关闭时发出一个函数(当选择一个日期时它关闭)。我基本上希望能够选择一个日期,而不是关闭日期选择器(它应该保持在屏幕上并突出显示所选日期)

这是基于下面的代码,它在stackblitz上运行良好-但出于某种原因,它不在我自己的应用程序中?

-注意-stackblitz代码是我遇到的一些通用代码,与下面的代码不同(尽管几乎相同)

//组成部分

@Component({
selector: 'app-datepicker',
templateUrl: './datepicker.component.html',
styleUrls: ['./datepicker.component.scss'],
})

export class DatepickerComponent {
@ViewChild('keepOpen') _input: ElementRef;

  _openCalendar(picker: MatDatepicker<Date>) {
      picker.open();
      console.log('here1'); // i see this in the console
  }

  _openCalendarClosed(picker: MatDatepicker<Date>) {
      picker.open();
      console.log('here2'); // never ever see this in the console log??
  }
}
@组件({
选择器:“应用程序日期选择器”,
templateUrl:“./datepicker.component.html”,
styleUrls:['./datepicker.component.scss'],
})
导出类DatepickerComponent{
@ViewChild('keepOpen')_输入:ElementRef;
_openCalendar(选取器:MatDatepicker){
picker.open();
console.log('here1');//我在控制台中看到了这个
}
_openCalendarClosed(选取器:MatDatepicker){
picker.open();
console.log('here2');//从未在控制台日志中看到过此项??
}
}
//html

<input
        matInput
        [matDatepicker]="picker"
        placeholder="Choose a date"
        (click)="_openCalendar(picker)"
        #keepOpen>

<mat-datepicker-toggle
        matSuffix
        [for]="picker">
</mat-datepicker-toggle>

<mat-datepicker
        #picker
        class="fixed-open"
        opened="true"
        (closed)="_openCalendarClosed(picker)">
</mat-datepicker>



看起来像material 5.0.0-rc。1是日期选择器组件接收到输出<代码>关闭事件能力的版本。您提到您使用的是material 2.0.0-beta.12,因此,需要更新以支持此行为。

您提供的stackblitz链接不包含您在问题中的代码。@p4r1抱歉,我应该说得更清楚一些-stackblitz中的代码不是我的代码,但它与我尝试执行相同功能的代码几乎相同-我甚至在中使用了相同的代码我的应用程序仍然不起作用:(当你说它在你的应用程序中不起作用时,这是什么意思?@p4r1在HTML组件中当日期选择器“关闭”时,它应该调用函数
\u opencalendar closed()
函数-此函数基本上保持日期选择器始终打开,因为一旦您选择了日期,当前它将关闭。我不确定升级是否会有帮助,因为2.0.0-beta.12是官方支持angular 4.x的材质的最后一个版本。材质5.x版本也会跳到angular 5.x。您似乎是正确的(虽然我希望如果可能的话不必升级到Angular 5.x)再次感谢@p4rl在这方面的建议-我会将此标记为答案