Question

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

    }

Answer 1

您需要在代码中更改此位： [（ngModel）] =“ selectedDocumentItem” 如果这是相同的，他们将一起改变。我使用ngFor循环。

Answer 2

[（ngModel）] 是双向绑定，并且您要与文件中的每个迭代项共享相同的 selectedDocumentItem ，因此，如果一个更改，那么另一个也会更改。

此处有更多解释：Difference between [(ngModel)] and [ngModel] for binding state to property?

建议在这里

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

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

(change)="selectedData($event)"

Angular 7-选择一个下拉列表的值将更新其他下拉列表

2 个答案: