角度重置下拉值primeng答案

【问题标题】：Angular reset dropdown values primeng角度重置下拉值primeng
【发布时间】：2019-04-25 14:49:32
【问题描述】：

大家好，我需要一些关于 Angular 和 Primeng 组件的帮助，接下来是场景。

我有一个模型：

export class Properties {
    public IdFittingConnector: number;
    public IdProperty: number;
    public IdGroup: number;
    public OrderAparitionNumber: number;
    public OrderCodePos: number;
    public ConnectorDescription: string;
    public PropertyDescription;
    public Values: FittingPropertiesValues[];
    public Disabled: boolean;
    public SelectedData: FittingPropertiesValues;
}

此模型存储在一个数组中，因此我为数组中的每个项目创建一个选择/下拉列表

<div *ngFor="let item of arrFittingsCombos;  let i = index">
    <h4>{{item.PropertyDescription}}</h4>
    <p-dropdown [(disabled)]="item.Disabled" [options]="item.Values" optionLabel="IrredutibleFractionValue" [(ngModel)]="item.SelectedData" [showClear]="true" (onChange)="OnFittingComboChange($event)" placeholder="Select Item" [style]="{'width':'100%'}"></p-dropdown>
</div>

就像你们看到的那样，在模型中我有一个用于存储名为“Values”的下拉值的道具，在同一模型上，我将选定的选项存储在名为“SeloectedData”的道具上。

现在最重要的是下一个。

我有几个验证，问题是我有两个下拉列表，但如果第二个值是 > 第一个下拉值，我需要重置第二个下拉列表。我给你看逻辑代码...

if (selectedOption.IdProperty == 5) {
    let diam: number = this.arrFittingsCombos.filter(x => x.IdProperty == 1)[0].SelectedData.NumberValue;

    if (selectedOption.NumberValue > diam) {
        alert("Seleccion invalida, la selección es mayor que el primer diametro");
        this.arrFittingsCombos.filter(x => x.IdProperty == 5)[0].SelectedData = null;
        this.searchBtnDisabled = true;
    }
}

就像您看到的那样，我正在重置 [(ngModel)]，实际上它确实如此，但在下拉列表中显示的标签仍然存在。我做错了什么？如果第一次验证没问题第一个 DropDown 值第一个 DropDown 值，行为是所需的，但之后显示的标签不再重置。

非常感谢您抽出宝贵时间，希望您能给我一点启发。

【问题讨论】：

标签： javascript angular typescript primeng

【解决方案1】：

我在 HTML 中有解决方案，我添加了角度标识符：

#dropdown_i 

<div *ngFor="let item of arrFittingsCombos;  let i = index">
    <h4>{{item.PropertyDescription}}</h4>
    <p-dropdown #dropdown_i [(disabled)]="item.Disabled" [options]="item.Values" optionLabel="IrredutibleFractionValue" [(ngModel)]="item.SelectedData" [showClear]="true" (onChange)="OnFittingComboChange($event, drop_i)" placeholder="Select Item" [style]="{'width':'100%'}"></p-dropdown>
</div>

然后在打字稿代码中我收到参数中的下拉列表。

OnFittingComboChange(event, dropdown: Dropdown) {
  //TODO logic code here...
}

最后使用名为dropdown.clear() 的下拉菜单方法，我可以重置选择的选项。

if (drop.value != null &&  selectedOption.IdProperty == 5) {
    let diam: number = this.arrFittingsCombos.filter(x => x.IdProperty == 1)[0].SelectedData.NumberValue;

    if (selectedOption.NumberValue > diam) {
        this.messageService.add({ severity: 'warn', summary: 'Validación', detail: 'Seleccion invalida, la selección es mayor que el primer diametro' });
        drop.clear(null);
        this.searchBtnDisabled = true;
    }
}

现在当条件正常时，元素被正确清除并且行为是期望的。

【讨论】：

【解决方案2】：

为什么这不起作用

这是因为您在 new array 上更改了属性 SelectedData。

在数组上调用.filter 始终会返回经过过滤的数组副本。所以当你改变它时，ngModel 不会意识到它。

可能的解决方案

我主要是在 react 中工作，所以我不确定改变你的类实例上的属性是否被 angular “接受”。但是让我们假设它是......

您可以做的是用您的变异数组替换 arrFittingsCombos，如下所示：

const newArray = this.arrFittingsCombos.filter(x => x.IdProperty == 5)

newArray[0].SelectedData = null

this.arrFittingsCombos = newArray

【讨论】：