0

我在我的 Angular 项目中使用 antd 设计组件。表中的一列是选择框类型，我希望用户输入此字段，并将表的数据作为 json 存储在数据库中。数据样本；

{
  "rows": [
    {
      "datas": [
        {
          "value": "TEST1",
          "text": ""
        },
        {
          "value": "TEST1",
          "text": ""
        }
      ]
    },
    {
      "datas": [
        {
          "value": "TEST2",
          "text": ""
        },
        {
          "value": "TEST2",
          "text": ""
        }
      ]
    }
  ]
}

以及我在 html 方面的解析；

              <nz-table [nzSize]="'small'" [nzScroll]="{ y: '400px' }" [nzData]="['']" [nzBordered]="true">
                <thead>
                  <tr>
                    <th>Text Column</th>
                    <th>Selectbox</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let row of sampleData.rows; index as i">
                    <td >                           
                        <input type="text" nz-input [(ngModel)]="row.datas[0].value"/>
                    </td >
                    <td>
                       <nz-select [(ngModel)]="row.datas[1].value"
                        nzShowSearch 
                        nzAllowClear 
                       >
                            <nz-option nzLabel="A01" nzValue="A01DESC"></nz-option>      
                            <nz-option nzLabel="A02" nzValue="A02DESC"></nz-option> 
                            <nz-option nzLabel="A03" nzValue="A03DESC"></nz-option> 
                            <nz-option nzLabel="A04" nzValue="A04DESC"></nz-option>                                            
                       </nz-select>
                    </td>
                  </tr>                      
                </tbody>
              </nz-table>

加载行时，第一列文本没有问题。每行的值听起来应该。但是第二列选择框将最后一行的值应用于所有其他行。 样本 ss

我错过了什么？或者实现这一目标的最佳方法是什么？我在整个项目中都使用了 antd 模板，但我可能会在这里考虑其他建议。谢谢您的帮助。

4

0 回答 0