从下拉列表中删除选定的选项并显示可用选项 - 选择表单控件 - Angular

Question

我需要从下拉列表中删除选定的选项，并在后续下拉列表中仅显示可用选项。第一次 getAvailableLocationsList() 返回所有可用选项。从第一个下拉列表中选择值后，第二个下拉列表将显示尚未选择的剩余选项。但是，当我返回查看第一个下拉列表值时，最初选择的选项没有被选中，因为我正在从列表中删除选定的值。下拉菜单和选项的数量是动态的，我需要让第一个下拉菜单显示所有可用的选项，而随后的下拉菜单中没有已经选择的选项。

HTML 代码：

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

打字稿代码：

getAvailableLocationsList(index, locationIndex) {
    let locationList = []; // Array- from service;
    const list= <FormArray>this.form.get('list');
    const locationArray = 
    <FormArray>list.controls[index].get('locationArray')['controls'][locationIndex].get('location');
    const locationVal = locationArray.value;
    const selectedLoc = _.findWhere(locationList, { address: locationVal });
    if (!_.isUndefined(selectedLoc)) {
        locationList = _.filter(locationList, (eachLoc) => {
            return eachLoc.address.id!== selectedLoc.id;
        });
    }
    return locationList;
}

有人可以帮忙吗？

Answer 1

对不起，我的上一条评论是一个糟糕的解决方案。原因是如果您从下拉菜单 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 中的位置"

Answer 2

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

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