Question

因此，我有一个重要的DatePicker，并以HTML形式缩写，如下所示：

<form novalidate (ngsubmit)="submit"
 [formGroup]="moneyForm">
    <mat-form-field>
       <input matInput [matDatepicker]="datePicker" 
          placeholder="Entry Date" 
          [formControl]="moneyForm.get('dateFormControl')">
        <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
       <mat-datepicker #datePicker></mat-datepicker>
    </mat-form-field>
    {{startDate}} - {{endDate}}
</form>

缩写的组件接线如下：

startDate: Date = new Date();
endDate: Date = new Date();
moneyForm: FormGroup;

constructor(private transactionService: TransactionsService, 
          private fb: FormBuilder) { 
}

ngOnInit() {
  this.transactionService.getLastDate(1)
    .subscribe(x => this.startDate = x);

this.moneyForm = this.fb.group({
  dateFormControl: [this.startDate]
})

问题在于，获取startDate的时间似乎延迟了，直到订阅者获得可观察的日期字段之后。是的，我观察到日期实际上是随着HTML中的{{startDate}}生成而获得的，因此我可以使用DevTools-Networking来查看调用是否成功。如果我将我的反应式表单控件上方的代码更改为仅进行静态分配，例如

this.startDate = new Date(2018, 5, 5);

它可以立即工作并在渲染的内容中设置默认日期。但是，另一个奇怪的问题是，它将日期设置为提前一个月，就像它是月份的从零开始的索引一样。我最近进行了更新，因此使用Angular 6.0.5和Angular Material 6.3.0相当最新。 Angular 6.0.0和Angular Material 6.0确实存在此问题。

真的，我只是想知道您是否可以设置要映射的管道或类似管道，以便反应式控件知道在完成订阅之前才分配值。我已经尝试过将“值”和“值更改”的扩展名更改为无效。感谢您的任何帮助。

Answer 1

我明白了，我仍然对Angular和其中的事件生存期不感兴趣。我可以直接在“ getLastDate（1）”的订阅中进行分配。这将我的“可观察”对象解包为一个具体对象。然后，我可以使用该值设置表单组，然后在此时将其完全识别出来。像这样：

this.transactionService.getLastDate(1)
      .subscribe(x => {
        this.startDate = x
        this.moneyForm.setValue({ dateFormControl: x })
      });

Angular Material Date Picker从注入的服务值中选择开始日期

1 个答案: