循环中出现mat-datepicker问题

问题描述

我正在学习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相同的模式

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

解决方法

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

    hostname: 127.0.0.1,port: 3306,user: 'root',password: "root",db: 'int'
    (url: localhost:3306)