以下是一个使用Angular动态列表与matDatepicker的示例解决方案:
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
@Component({
selector: 'app-my-component',
template: `
- {{ item }}
`
})
export class MyComponent {
selectedDate = new FormControl();
items = [];
addItem() {
const selectedDate = this.selectedDate.value;
if (selectedDate) {
this.items.push(selectedDate);
this.selectedDate.setValue(null); // 重置选择的日期
}
}
}
在模板中,使用mat-form-field
包裹mat-datepicker
和mat-datepicker-toggle
来创建一个可以选择日期的输入框。使用[formControl]="selectedDate"
将FormControl与输入框绑定,这样选择的日期就会自动更新到FormControl中。
使用*ngFor
指令在元素上迭代
items
数组,并将每个元素显示为列表项。
在addItem()
方法中,获取选择的日期并将其添加到items
数组中。最后,使用this.selectedDate.setValue(null)
重置选择的日期。
这样,每当点击“Add Item”按钮时,选择的日期就会被添加到列表中,并且选择的日期将被重置为空。
请注意,上述示例假设你已经正确导入了Angular Material和相关的模块。如果没有,请确保已经按照官方文档中的说明正确安装和配置了这些模块。
下一篇:Angular动态列名