项目场景:
form表单中,如果遇到一个需要动态行的table来拼接sql语句的业务
问题描述
然后需要在行里面赋值的时候遇到问题了,添加几行,无论修改哪一行,全部都会被修改
<form nz-form #eitorForm="ngForm" *nzModalContent><nz-form-label nzRequired [nzSm]="3" [nzXs]="24" nzFor="content">条件配置</nz-form-label><nz-form-control [nzSm]="24" [nzXs]="24"><nz-table style="height: 300px" [nzScroll]="{ y: '100%' }" [nzShowPagination]="false" #editRowTable nzBordered [nzData]="listOfData"><thead><tr><th nzWidth="15%">字段</th></tr></thead><tbody><tr *ngFor="let data of editRowTable.data" class="editable-row"><td><nz-selectname=“name”(blur)="stopEdit()"[hidden]="editId !== data.id"style="width: 100%"name="leftParentheses"nz-input[(ngModel)]="data.leftParentheses"><nz-option *ngFor="let item of leftParenthesis" [nzLabel]="item.key" [nzValue]="item.value"></nz-option></nz-select></td></tr></tbody></nz-table></nz-form-control></form>
原因分析:
form组件里面的标签都需要加上name属性,因为这些标签都要交给form处理,所以用name属性标识每一个标签,然后这个标签是一个table的列定义,table的data是一个动态的list,所以你把name属性给这个table的行,因为是动态增加的行,而你的name却是固定的,每一行的name都是同一个name,所以form按照同一个元素处理,结果就是你对行数据进行编辑的时候,他的动作就是整齐划一。
解决方案:
解决:把这个table提出来,单独成一个组件
<form nz-form #eitorForm="ngForm" *nzModalContent><nz-form-label nzRequired [nzSm]="3" [nzXs]="24" nzFor="content">条件配置</nz-form-label><nz-form-control [nzSm]="24" [nzXs]="24"><app-table-list [Fields]="Fields" (key)="changeSql($event)" [listOfData]="listOfData" [data]="data"></app-table-list></nz-form-control></form>
tips:今天看了一会儿社会心理学,里面有一个观点:婚姻幸福的伴侣会把对对方刻薄的言辞归结于外部因素,比如(‘你就不能把它放回原来的地方吗?’),归结于外部因素就是(‘她今天过得不好,或者啥来了’);婚姻不幸的伴侣则是(‘她总是这么言辞刻薄’),然后就反唇相讥,以眼还眼以牙还牙,而且由于对方也预期会得到你的比较负面的反应,就逐渐暴躁起来,这样都激起了双方所预期的对方的愤怒;人本身的心理其实是受整个环境影响的,我们是情境中的动物,是被情景塑造的,譬如线程工作的上下文吧!