时间戳

首页 > 解决方案 > 选定的下拉值应在立即列值中更新

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

问题描述

必须选择下拉列表，并且选择的下拉列表值应在表中的立即列（td）值中更新。我尝试使用以下代码，我可以填充下拉列表，并且可以从下拉列表中选择选项。但是选择的下拉菜单需要在直接的“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 演示

在此处输入图像描述

标签： javascriptangulartypescriptangular-datatables

解决方案

该列似乎指向 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>

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

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

推荐阅读