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

仲孙小云
2023-12-01

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

 类似资料: