jQuery UI datepicker禁用选项未被Angular 2识别

我在Angular 2应用程序中使用jQueryUIDatePicker，它工作正常，只有一个例外。我的应用程序有一个单选按钮选项列表，当选中其中任何一个选项时，该列表会将名为ServiceTypeSelected的变量设置为true（当应用程序加载时，该变量最初为false）

我希望禁用日期选择器，直到用户检查其中一个单选按钮，使ServiceTypeSelected为true。我有一个单独的服务为用户建立订单，在datepicker组件中，我订阅了一个服务方法，该方法在用户通过应用程序的各个阶段时跟踪订单的建立。我知道，当选中单选按钮时，ServiceTypeSelected变量正在从false切换为true，并且我对服务的订阅可以识别变量的值何时发生变化，因为我插入的控制台日志的行为与我预期的一样，通知我在选中单选按钮之前日期选择器处于禁用状态，并在我选中单选按钮后通知我它正在启用日期选择器。但是，与我当前的代码一样，无论是否选中了单选按钮，日期选择器都被禁用

我已经确定语句的“如果”部分工作正常。如果我将datepicker的disabled属性设置为false，则datepicker将被禁用。如果我把它设为真，它就行了。问题在于声明的“其他”部分。控制台日志按照datepicker的disabled属性的预期工作，但不受影响。我很困惑

import { ViewChild, ElementRef, OnInit, AfterViewInit, Component } from
'@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR } from 
'@angular/forms';

import { OtrixService } from '../otrix.service';

declare var jQuery: any;

@Component({
  selector: 'otrix-datepicker',
  templateUrl: './datepicker.component.html',
  styleUrls: ['./datepicker.component.scss']
})
export class DatepickerComponent implements OnInit, AfterViewInit {

  @ViewChild('readyDate') dateInput: ElementRef;

  constructor(
    private otrixService: OtrixService,
  ) {}

  ngOnInit() {

    this.otrixService.getStagedOrder().subscribe((order) => {
      if (!order.serviceTypeId) {
        console.log('Service type not yet chosen. Datepicker
        disabled.');
        jQuery(this.dateInput.nativeElement).datepicker({disabled:
        true});
        console.log(this.dateInput.nativeElement);
      } else if (order.serviceTypeId) {
        console.log('Service type chosen. Enabling datepicker.');
        jQuery(this.dateInput.nativeElement).datepicker({disabled:
        false});
      }
    });

  }

  ngAfterViewInit() {

    jQuery(this.dateInput.nativeElement).datepicker({
      minDate: new Date(), // custom settings
      maxDate: '30d',
      showAnim: 'slideDown',
      onSelect: (datePicked: boolean) => { // when user picks a date...
        let readyDate =  
        jQuery(this.dateInput.nativeElement).datepicker('getDate');
        this.otrixService.setReadyDate(readyDate);
      }
    });

  }

}

---

是否确实正确调用了日期选择器启用/禁用？这可能是一个问题。@chrispy是的，我知道调用是正确的，因为如果我取出禁用它的jQuery代码行，并将其放在if语句之外的一行上，它就会工作。我注意到如果我使用传统函数而不是箭头函数，我得到一个错误，上面写着“无法准备未定义的属性nativeElement”。这就是为什么我认为这是“这个”的一个问题…好像它没有被正确地选择或者什么。嗯，我觉得应该在你的例子中适当地保留范围…@chrispy我刚刚编辑了我的帖子。见增加的段落。我很困惑。