Question

我的组件中有2个重要的日期选择器。它们每个都位于不同的mat-tab中。

第一个标签页的日期选择器应为MM/YYYY，第二个标签页的日期选择器应为正常日期DD/MM/YYYY。

将datepicker的值更改为MM/YYYY的第一步如下：

export const MY_FORMATS = {

  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

并且：

<mat-form-field>
      <input matInput formControlName="invoiceDate" [matDatepicker]="picker" placeholder="Choose the Month">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker startView="year" (yearSelected)="getSelectedYear($event)"
                    (monthSelected)="getSelectedMonth($event, picker)">
      </mat-datepicker>
</mat-form-field>

主要问题是当我在第二个datepicker中添加了第二个mat-tab时。格式MM/YYYY用于所有现有的日期选择器。

我很想做的是声明一个导出变量，如下所示：

export let tab = 1;

做了两种格式：

export const MY_FORMATS = {

  parse: {
    dateInput: 'MM/YYYY',
  },
  display: {
    dateInput: 'MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

export const MY_FORMATS_RECEIPTS = {

  parse: {
    dateInput: 'DD/MM/YYYY',
  },
  display: {
    dateInput: 'DD/MM/YYYY',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

在提供者部分：

providers: [

    {
      provide: DateAdapter,
      useClass: MomentDateAdapter,
      deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]
    },

    {provide: MAT_DATE_FORMATS, useValue: tab==0?MY_FORMATS:MY_FORMATS_RECEIPTS},
],

我正在使用以下方法更新tab点击上的mat-tab：

<mat-tab-group (click)="getTab($event.which)">

并且：

getTab(tab){
    tab = tab
}

我可能会错过导出const和变量的概念，但这是我唯一的解决方案，但是没有用。

如果我已经将tab声明为0，它将采用第一种格式，并且在加载组件并选择tab 1时，什么都不会改变。

Angular 8如何根据所选的“物料”选项卡更改物料日期选择器的提供者？

0 个答案: