0

所以我有一个材料 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”，但无济于事。感谢任何帮助。

4

1 回答 1

0

我明白了，我仍然是 Angular 和其中的事件生命周期的菜鸟。我可以直接在“getLastDate(1)”的订阅中进行分配。这将我的“Observable”展开为一个具体的对象。然后我可以用这个值设置我的表单组，然后在这个时候被完全识别。像这样：

this.transactionService.getLastDate(1)
      .subscribe(x => {
        this.startDate = x
        this.moneyForm.setValue({ dateFormControl: x })
      });
于 2018-06-22T14:25:51.300 回答