javascript - Angular 重置下拉值 primeng

Question

大家好，我需要一些关于 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>

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

接下来是大事。

我有几个验证，问题是我有两个下拉菜单，但如果第二个值大于第一个下拉值，我需要重置第二个下拉菜单。我给你看逻辑代码……

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)]，实际上它确实如此，但在下拉列表中显示的标签仍然存在。我做错了什么？如果第一次验证没问题 First DropDown Value < Second DropDown Value 然后我将第二个下拉值更改为 > first DropDown value 行为是所需的行为但之后显示的标签不再重置。

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

Answer 1

我在 HTML 中有解决方案，我添加了 Angular 标识符:

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

然后在 typescript 代码中我收到参数中的下拉菜单。

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

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