循环中的 mat-datepicker 问题

Question

我正在学习 angularjs 并且对它很陌生。我正在尝试以下列方式使用 ngFor 在 GUI 上创建 5 个 mat-datepicker 组件（经过大量在线搜索）

<div fxLayout="row" fxFlex=20 fxLayoutAlign="center center" fxLayoutGap="35px">
            <mat-form-field fxFlex=20 appearance="outline" *ngFor="let pay of loanDetails.paymentOptions; index as i;">
                <mat-label>Start Date</mat-label>
                <input matInput [matDatepicker]="i" placeholder="Start date" [(ngModel)]="pay.paymentDate" (dateChange)="getLoanOutputData()">
                <mat-datepicker-toggle matSuffix [for]="i"></mat-datepicker-toggle>
                <mat-datepicker #i></mat-datepicker>
            </mat-form-field>
</div>

但是，这似乎不起作用（意思是，当我单击日历图标时，日历没有打开）并且引发​​了一些异常。

页面加载错误：

点击日历图标时，出现以下错误：

这是我的loanDetails在ts文件中的结构

loanDetails = {
        principal: 100000,
        interestRate: 9.5,
        tenure: 5,
        startDate: new Date(),
        paymentOptions: [this.oneTimePay, this.yearlyPay, this.halfYearlyPay, this.quarterlyPay, this.monthlyPay]
    };

oneTimePay = {
        paymentType: "OneTime Payment",
        paymentDate: new Date(),
        paymentAmt: 0
    }

所有其他“支付”，如monthlyPay 等。遵循与oneTimePay 相同的模式

请帮助我了解哪里出了问题。

Answer 1

您确实在使用 Angular（而不是 Angularjs）。好吧，在 *ngFor 中你没有关心“模板引用变量”的名称，你应该使用相同的（你不能使用“i”，因为 Angular 有两个变量“i”——循环的变量和模板参考-

       <mat-form-field fxFlex=20 appearance="outline" 
         *ngFor="let pay of loanDetails.paymentOptions; index as i;">
            <mat-label>Start Date</mat-label>
             <!--see that use always 'picker'-->
            <input matInput [matDatepicker]="picker" placeholder="Start date" [(ngModel)]="pay.paymentDate" (dateChange)="getLoanOutputData()">
            <!--again 'picker'-->
            <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <!--and again 'picker'-->
            <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>