Question

我需要从下拉列表中删除选定的选项，并在随后的下拉列表中仅显示可用选项。第一次getAvailableLocationsList（）返回所有可用选项。从第一个下拉列表中选择值后，第二个下拉列表将显示尚未选择的其余选项。但是，当我返回查看第一个下拉菜单值时，最初选择的选项未选中，因为我正在从列表中删除选择的值。下拉菜单和选项的数量是动态的，我需要使第一个下拉菜单显示所有可用选项，并且随后的下拉菜单不包含已选择的选项。

HTML代码：

upgrade

打字稿代码：

<div formArrayName="locationArray">
    <div *ngFor="let location of list.controls[index].get('locationArray').controls;let locationIndex=index">
        <div [formGroupName]="locationIndex">
            <select class="form-control" formControlName="location" id="{{'location'+index}}" (change)="getLocationName(index, locationIndex)">
                <option disabled value=""> Select</option>
                <option *ngFor="let item of getAvailableLocationsList(index, locationIndex)" ngDefaultControl [ngValue]="item.address">{{item.address}}
                </option>
            </select>
        </div>
    </div>
</div>

有人可以帮忙吗？

Answer 1

一个问题是，对于要从此列表中提取的信息，所有内容都设置为常量。常量不能更改。

我建议将要使用的位置放置在临时数组中，然后在选择该选项后，在调用的函数中，从该临时数组中删除该选项。这样，每次您回到下拉菜单时，它都不再提供以下选项：

Answer 2

对不起，我的最后评论是一个不好的解决方案。原因是因为如果您从下拉列表1中选择了错误的选项，然后从下拉列表1中选择了一个不同的选项，那么您现在将从下拉列表2中缺少2个选项，而不仅仅是一个。相反，您应该执行以下操作：

仅使用一个数组从列表中禁用该选项：在您的控制器中：

arrayOfLocationsForDropdowns = [1, 2, 3, 4, 5];
selectedOptionFromDropDownOne = selected location;

在您的html中：

下拉1：

<select class="form-control" formControlName="location">
    <option *ngFor="let location of locationList" [value]="location">{{location}}</option>
</select>

**仍然使用您的过滤技术，但不要删除所选的选项，而是将该选项设置为等于变量selectedOptionFromDropDownOne

下拉菜单2：

<select class="form-control" formControlName="location2">
    <ng-container *ngFor="let location of locationList" >
         <option *ngIf="location != selectedOptionFromDropDownOne" [value]="location">{{location}}</option>
    </ng-container>
</select>

这将使您能够使用所有数据而不会取出任何数据，并且它将显示第二个下拉列表中的所有值，但第一个下拉列表中选择的选项除外。

要使其更加动态，请使变量selectedOptionFromDropDownOne成为数组，并检查该数组是否存在后续下拉列表：

arrayOfSelectedOptionsFromPreviousChoices = [] 然后在将来的代码中选择：

将ngIf从* ngIf =“ location！= selectedOptionFromDropDownOne”更改为 * ngIf =“！位于arrayOfSelectedOptionsFromPreviousChoices中的位置”

从下拉列表中删除选择的选项并显示可用选项-select-form-control-Angular

2 个答案: