1,实体示例如下,Blog对象中包含子属性Post列表。
Entity:
Blog : List<Post> Posts
Post : string Name
List<string> typeList
2,Component中使用Form表单对Blog对象进行显示和修改。
<form nz-form #blogForm="ngForm" [nzLayout]="'vertical'">
<div>
<nz-table #blogTable [nzData]="Blog.Posts" nzShowPagination="false">
<tr *ngFor="let item of blogTable.data ; let i = index">
<td>
<label nz-checkbox [(ngModel)]="item.isChecked" name="{{i}}+isChecked">{{item.name}}</label>
</td>
<td>
<nz-form-item>
<nz-form-label [nzSpan]="24">Type</nz-form-label>
<nz-form-control [nzSpan]="24">
<nz-select [(ngModel)]="item.typeList" nzAllowClear nzPlaceHolder="Please Select" [nzSuffixIcon]="templateS" name="{{i}}+typeList"
nzMode="multiple">
<nz-option *ngFor="let postType of postTypeList" [nzValue]="postType.name" [nzLabel]="postType.name"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</td>
</tr>
</nz-table>
</div>
</form>
1) post 对象的type支持多选,下拉框选择值为postTypeList。
当前示例中postTypeList列表里的对象为enum类型,下拉框显示为enum的name值,选择后保存到post中的值也为string类型。
也可以将postTypeList里的类型换成string,此时<nz-option> 中 [nzValue] ="postType",[nzLabel] ="postType"。
2)form表单项的每个[(ngModel)]绑定一个对象属性,且有唯一的name值,但是当使用for循环时,每条记录的相同属性共用一个name,此时从数据库读取到的值不能正确显示到每个input、CheckBox、select,需要分别命名name。本示例采用的方法为: name="{{i}}+isChecked",为每个name添加一个变量。