循环中的mat-datepicker问题

Question

我正在学习angularjs，而且还是个新手。我正在尝试使用ngFor在图形用户界面上创建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>

然而，这似乎不起作用(这意味着，当我点击日历图标时，日历没有打开)，并且抛出了一些异常。

加载页面时出错：

​

当单击日历图标时，我得到以下错误：

​

这是ts文件中loanDetails的结构

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)。那么，在一个* of中如果你没有注意到“模板引用变量”的名字，你应该使用相同的名称(你不能使用"i“，因为Angular有两个变量"i”-the变量的循环和模板引用-

       <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>