Angular -- form表单中使用*ngFor循环

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添加一个变量。