Angular 7 - 选择一个下拉列表的值正在更新其他下拉列表答案

【问题标题】：Angular 7 - Selecting a value of one dropdown is updating the othersAngular 7 - 选择一个下拉列表的值正在更新其他下拉列表
【发布时间】：2019-11-14 09:25:27
【问题描述】：

我的 Angular 7 应用程序中有一个 html，我在其中为每一行显示相同的下拉列表。选择一个下拉菜单正在更改另一个下拉菜单的值。如何使选择对该特定下拉菜单唯一。

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>

组件代码

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';
                },
                () => {
                });

    }

【问题讨论】：

如果他们都共享相同的模型，那么他们当然都选择相同的数据。您可以为不同的“selectedDocumentItem”设置一堆值，列表中的每个项目一个，但最好让您的列表成为一个组件，它可以根据需要重复多次。该组件将很好地包装自己的数据。
和你对输入框做的一样：它的模型是item.relativePath，所以每个项目都有自己的relativePath。由于您还希望每个项目都有自己的选定文档，因此下拉列表的模型应该是 item.selectedDocumentItem，而不是 selectedDocumentItem。
我试过 item.selectedDocumentItem，它似乎工作

标签： angular

【解决方案1】：

您需要在代码中更改此位： [(ngModel)]="selectedDocumentItem" 如果这个相同，它们将一起改变。使用我想要的 ngFor 循环。

【讨论】：

加里不确定你的意思

【解决方案2】：

[(ngModel)] 是一种双向绑定，您与文件中的每个迭代项共享相同的 selectedDocumentItem，因此如果一个更改，那么另一个也将更改。

这里推荐

在控制器中创建一个存储所选选项的方法。

selectedData(event: any) { this.storedData = event.target.value; }
然后从html调用它

(change)="selectedData($event)"

【讨论】：