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>

就像您看到的一样，在模型中，我有一个道具，存储了称为“ 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值，然后我将第二个下拉值更改为>第一个DropDown值，该行为是所需的行为，但此后显示的标签将不再重置。

非常感谢您的时间，希望您能给我一些启发。

Answer 1

为什么这不起作用

这是因为您是在新 SelectedData上对属性array进行了突变。

在数组上调用.filter总是返回该数组的过滤后副本。因此，当您对此进行更改时，ngModel不会意识到它。

可能的解决方案

我主要从事反应工作，所以我不确定角度是否“接受”您的类实例上的属性突变。但让我们假设它是...

您可以做的是将arrFittingsCombos替换为突变数组，如下所示：

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

newArray[0].SelectedData = null

this.arrFittingsCombos = newArray

Answer 2

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

现在，当条件确定时，将正确清除该元素，并达到所需的行为。

角度重置下拉值primeng

2 个答案: