Angular 2

Question

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

我希望在用户选中其中一个单选按钮之前禁用datepicker，使serviceTypeChosen为true。我有一个为用户构建订单的单独服务，并且在datepicker组件中，我订阅了一个服务方法，当用户经历应用程序的各个阶段时，该方法跟踪订单的构建。我知道当选中单选按钮时，serviceTypeChosen变量从false切换为true，并且我对服务的预订会识别变量值的变化，因为我插入的控制台日志的行为方式与我期望的一样，通知我在检查单选按钮之前禁用了日期选择器，并在检查单选按钮后通知我它启用了日期选择器。但是，由于它与我当前的代码一致，无论是否已选中单选按钮，都会禁用日期选择器。

我已经确定了＆＃39; if＆＃39;声明的一部分正常工作。如果我将datepicker的disabled属性设置为false，则禁用datepicker。如果我将其设置为true，则可以正常工作。问题在于“其他”＆＃39;声明的一部分。控制台日志按预期工作，由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);
      }
    });

  }

}