循环中的mat-datepicker问题

<ng-container *ngFor="let item of items; trackBy: trackByFn">
  <mat-form-field>
    <input matInput [matDatepicker]="picker" [(ngModel)]="item.date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</ng-container>

trackByFn(index, item) {
  return item.id; // 使用item的唯一标识符作为trackBy的返回值
}

<ng-container *ngFor="let item of items; let i = index;">
  <mat-form-field>
    <input matInput [matDatepicker]="picker" [formControl]="dateControl(i)">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</ng-container>

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({});
  this.items.forEach((item, index) => {
    this.form.addControl(`date_${index}`, this.fb.control(item.date));
  });
}

dateControl(index: number) {
  return this.form.get(`date_${index}`);
}

<ng-container *ngFor="let item of items; let i = index;">
  <ng-container *ngComponentOutlet="datePickerComponent; injector: injector(i)"></ng-container>
</ng-container>

@Component({
  template: `
    <mat-form-field>
      <input matInput [matDatepicker]="picker" [(ngModel)]="date">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  `
})
export class DatePickerComponent {
  date: Date;
}

datePickerComponent = DatePickerComponent;

injector(index: number) {
  const injector = Injector.create({
    providers: [
      { provide: 'index', useValue: index }
    ],
    parent: this.injector
  });
  return injector;
}