Selected dropdown value should be update in immediate column value

user_1989472 0
Viewed 37

Have to select dropdown and Selected dropdown value should be updated in immediate column(td) value in the table. I tried with the below code, I can able to populate dropdowns and I can select options from the dropdown. But selected dropdown need to update in the immediate "td" column. Please find attached a screenshot and stackblitz for the demo.

HTML code:

 <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 code:

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

Stackblitz for Demo

enter image description here

angular-datatables angular typescript javascript
1 Answers

The column seems to point to firstName instead of the test that you have binded on the dropdown.. So you might want to change it to <td>{{ person.test}}</td>.

Example:

    <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>

Also, if you want to have it initialised with the first name; you can change your map function to add the first name instead of 'test'

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

user_58832770
Related