代码之家 › 专栏 › 技术社区 › djangojazz

角度材料日期选择器从注入的服务值中选择开始日期

rxjs6 angular6 angular-reactive-forms angular-material angular

0

djangojazz · 技术社区 · 6 年前

所以我有一个材料日期选择器和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>

缩写的组件wire up如下:

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网络来查看调用是否成功。如果我将反应式表单控件上方的代码更改为只执行如下静态赋值

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

它立即工作,并在呈现内容中设置默认日期。然而,另一个奇怪的问题是,它将日期提前了一个月,就像是一个基于零的月份指数。我最近更新了,所以我用角60.5和角材质3.3.0非常流畅。这个问题确实存在与角60.0和角材料6。

实际上,我只想知道您是否可以设置一个映射管道或类似的管道,以便无功控制知道在订阅完成之前不赋值。我尝试过“value”和“valuechanged”的扩展,但没有成功。感谢您的帮助。

1 回复 | 直到 6 年前

1

0

djangojazz 6 年前

我明白了,我仍然是一个角度和事件的生命周期。我可以直接在“getLastDate(1)”的订阅中进行分配。这将我的“可观察到的”解构成一个具体的对象。然后我可以用这个值设置我的表单组,然后在这个时候完全识别。像这样:

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