Angular 7 - Selecting a value of one dropdown is updating the others

Question

I have an html in my angular 7 application where I am displaying the same dropdown for every row. Selecting one dropdown is changing the value for the other. How do I make the selection unique to that particular dropdown.

html

<div class="upload-table">
            <table id="table1" class="center" >

                <tbody class="upload-name-style">
                    <tr *ngFor="let item of files; let i=index">
                        <td> <input kendoTextBox [(ngModel)]="item.relativePath" style="width: 350px" /></td>
                        <td><kendo-dropdownlist style="width:350px" [(ngModel)]="selectedDocumentItem"  [data]="DocumentTypes"
                            [filterable]="false" textField="Name"  valueField="Id">
                        </kendo-dropdownlist></td>
                    </tr>
                </tbody>
            </table>


        </div>

Component Code

DocumentTypes: any = {};
    selectedDocumentItem: { 'Id': any; 'Name': any; };

public getDocumentTypes() {
        this.documentUploadService.getDocumentTypes()
            .subscribe(data => {
                this.DocumentTypes = data;
                this.DocumentTypesForDropDown = this.DocumentTypes.map(x => x.Name);
                this.getDocumentUploadDetails();
                this.setGridOptions();
                this.setColumns();
            },
                err => {
                    this.Error = 'An error has occurred. Please contact BSG';
                },
                () => {
                });

    }

If they're all sharing the same model then of course they all select the same data. You could have a bunch of values for different 'selectedDocumentItem', one for each item in your list, but much better make your list a Component that is repeated as many times as you want. The component will wrap its own data nicely. — Michael Beeson, Jul 03 '19 at 16:20
The same way you're doing for the input box: its model is `item.relativePath`, so each item has its own relativePath. Since you also want each item to have its own selected document, the dropdown's model should be `item.selectedDocumentItem`, not `selectedDocumentItem`. — JB Nizet, Jul 03 '19 at 16:22

score -1 · Answer 1 · answered Jul 03 '19 at 16:24

-1

you need to change this bit in your code: [(ngModel)]="selectedDocumentItem" if this one is the same they will change all together. use the ngFor loops i intead.

answered Jul 03 '19 at 16:24

GaryB

374
1
9

Gary not sure what you mean – Tom Jul 03 '19 at 16:42

score -2 · Answer 2 · answered Jul 03 '19 at 16:29

[(ngModel)] is a two way binding and you are sharing same selectedDocumentItem with each Iterated item in files, so if One changes then other will also change.

Explained more here : Difference between [(ngModel)] and [ngModel] for binding state to property?

Here it is recommended to

Create a method in controller that will store the selected option.

selectedData(event: any) { this.storedData = event.target.value; }
Then call it from html

(change)="selectedData($event)"

Angular 7 - Selecting a value of one dropdown is updating the others

2 Answers2