如何将剪贴板数据分配到FormArray对应FormControl并显示在表格中?
需求与问题
我需要实现从Excel复制数据,按原顺序填充到HTML表格的对应位置里。目前已经能通过粘贴事件获取剪贴板中的Excel数据,并且成功将其拆分为对应行列的二维数组,但所有值只会插入触发粘贴操作的单个输入框中,不知道怎么把数组里的每个值分配到FormArray对应的FormControl中。
已实现的代码片段
HTML部分
... <label> <input style="background-color: silver" type="text" [formControl]="rowControl.get(column.attribute)" (paste)="pasteExcelData($event)" /> </label> ...
TypeScript部分
/** * 处理Excel数据粘贴到数据表 */ pasteExcelData(event: ClipboardEvent) { // 获取剪贴板文本内容 const clipboardText = event.clipboardData.getData('text'); // 按换行符拆分为行数组 let clipRowsArray = clipboardText.split(String.fromCharCode(13)); console.log('拆分后的行数组:', clipRowsArray); // 将每行按制表符拆分为列数组 clipRowsArray = clipRowsArray.map(row => row.split(String.fromCharCode(9))); console.log('拆分后的二维数组:', clipRowsArray); // TODO:将数组值分配到对应FormControl for (let index = 1; index < 7; index++) { const month = `${index}`; // 待实现逻辑 } }
当前进展
粘贴Excel数据时,浏览器控制台能正确输出拆分后的二维数组,但所有值仅填充到触发粘贴的单个输入框,无法对应到FormArray的各个FormControl中。
内容的提问来源于stack exchange,提问作者oregairu2022
相关产品推荐
相关产品推荐

