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

Question

所以我有一个 material 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 也确实存在这个问题。

真的，我只是想知道您是否可以设置一个映射管道或类似管道，以便反应式控件知道在订阅完成之前不分配值。我尝试了 'value' 和 'valuechanged' 的扩展，但无济于事。感谢任何帮助。

Answer 1

我明白了，我仍然是 Angular 和其中的事件生命周期的菜鸟。我可以直接在'getLastDate(1)'的订阅里做作业。这会将我的 'Observable' 解包为一个具体对象。然后我可以用这个值设置我的表单组，这个值在这个时候被完全识别。像这样：

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

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

Angular Material Date Picker selecting a start date from an injected service value

angular-material

angular

angular-reactive-forms

angular6

rxjs6