选定的下拉值应在立即列值中更新

Question

必须 select 下拉列表和选定的下拉列表值应在 table 的直接列 (td) 值中更新。我尝试使用以下代码，我可以填充下拉菜单，并且可以从下拉菜单中选择 select 选项。但是 selected 下拉列表需要在直接的“td”列中更新。请在附件中找到演示的屏幕截图和 stackblitz。

HTML代码：

 <select [disabled]="!person.check?true:null" [(ngModel)]="person.test" (change)="selected(person.test)">  
      <option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>

ts代码：

this.http.get(dataUrl).subscribe(response => {
  this.persons = response.data.map(x=>({...x,check:false,test:'test'}));
  this.dtTrigger.next();
});

Stackblitz for Demo

Answer 1

该列似乎指向 firstName 而不是您在下拉列表中绑定的测试。因此您可能希望将其更改为 <td>{{ person.test}}</td>。

示例：

    <tbody>
      <tr *ngFor="let person of persons;let i = index;">
        <td><input [(ngModel)]="person.check" type="checkbox" class="checkboxCls" name="id" ></td>
        <td>{{ person.id }}</td>
        <td>
          <span id={{i+1}})>{{ person.firstName }}</span><br/>
          <select [disabled]="!person.check?true:null" [(ngModel)]="person.test" (change)="selected(person.test)">
            <option *ngFor="let prod of ProductHeader" [value]="prod.name" >{{prod.name}}</option>
          </select>
        </td>
        <td>{{ person.test }}</td>    <---HERE
        <td>{{ person.firstName }}</td>
        <td>{{ person.lastName }}</td>
      </tr>
    </tbody>

另外，如果你想用名字初始化它；您可以更改地图功能以添加名字而不是 'test'

this.persons = response.data.map(x=>({...x,check:false,test:x.firstName}));

选定的下拉值应在立即列值中更新

Selected dropdown value should be update in immediate column value

javascript

typescript

angular-datatables

angular