循环中 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>

循环中 mat-datepicker 的问题

Issue with the mat-datepicker in a loop

angular-material

angular

mat-datepicker