我正在学习 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文件中my的结构
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
请帮助我了解哪里出了问题。