Angular中点击下拉选项仅修改当前节点下拉选项的问题

在Angular项目中，通过*ngFor循环渲染多个p-multiSelect下拉组件，需求为：点击值为-3352的选项时，仅将当前对应node的下拉选项从values切换为valuesDisabled，而非所有下拉组件。尝试过两种方案但均导致所有下拉组件的选项被同时修改，无法实现仅修改当前节点下拉选项的效果，现寻求正确实现方式。

原相关代码 #

TypeScript代码 #

values = [
  { value: 3432, label: "Recent" },
  { value: 3442, label: "Most Popular" },
  { value: 3352, label: "Rating" }
];
nodes = [
  {name: 'first node', id: 34},
  {name: 'second node', id: 35},
  {name: 'third node', id: 36},
  {name: 'fourth node', id: 37}
];
valuesDisabled = [
  { value: 3432, label: "Recent" , disabled: true},
  { value: 3442, label: "Most Popular", disabled: false },
  { value: -3352, label: "Rating", disabled: false }
];
selectedRiskItems: {[key: number]: any[]} = {};

HTML代码 #

<p *ngFor="let node of nodes">
  <p-multiSelect [options]="values"   
     [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedRiskItems[node?.id]"
     id="pickListForscopeReviewersList" appendTo="body" 
  ></p-multiSelect>
</p>

尝试过的方案 #

方案一：给node添加disabled属性动态切换 #

<p *ngFor="let node of nodes">
  <p-multiSelect [options]="node.disabled ? valuesDisabled : values"   
     [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedRiskItems[node?.id]"
     id="pickListForscopeReviewersList" appendTo="body" 
  ></p-multiSelect>
</p>

方案二：给每个node绑定独立的values数组 #

nodes = [
  {name: 'first node', id: 34, values:[{value:1 , label: 'one', disabled: false},{value:2 , label: 'two', disabled: false},{value: 3, label: 'three', disabled: false}]},
  {name: 'second node', id: 35},
  {name: 'third node', id: 36},
  {name: 'fourth node', id: 37}
];

<p *ngFor="let node of nodes">
  <p-multiSelect [options]="node.values"   
     [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedRiskItems[node?.id]"
     id="pickListForscopeReviewersList" appendTo="body" 
  ></p-multiSelect>
</p>

正确实现方式 #

步骤1：给每个node添加独立状态标识 #

更新nodes数组，为每个节点添加useDisabledOptions属性，用于控制当前节点的下拉选项来源：

nodes = [
  {name: 'first node', id: 34, useDisabledOptions: false},
  {name: 'second node', id: 35, useDisabledOptions: false},
  {name: 'third node', id: 36, useDisabledOptions: false},
  {name: 'fourth node', id: 37, useDisabledOptions: false}
];

步骤2：修改HTML模板，绑定动态选项并监听选择事件 #

通过node.useDisabledOptions动态切换选项，同时监听onChange事件来更新当前节点的状态：

<div *ngFor="let node of nodes">
  <p-multiSelect 
    [options]="node.useDisabledOptions ? valuesDisabled : values"
    [(ngModel)]="selectedRiskItems[node.id]"
    [ngModelOptions]="{standalone: true}"
    (onChange)="handleOptionChange($event, node)"
    appendTo="body"
  ></p-multiSelect>
</div>

步骤3：实现选择事件处理逻辑 #

在组件类中添加handleOptionChange方法，判断当前选中项是否包含-3352，并更新对应node的状态：

handleOptionChange(event: any, node: any) {
  // 检查选中值中是否包含目标选项
  const hasTargetOption = event.value.some((item: any) => item.value === -3352);
  // 更新当前节点的选项状态
  node.useDisabledOptions = hasTargetOption;
}

方案说明 #

• 每个node拥有独立的useDisabledOptions状态，确保修改仅影响当前节点的下拉组件
• 通过onChange事件精准捕获当前节点的选择变化，避免全局状态污染
• 动态切换选项数组时，保持原数组的独立性，不会因引用类型导致所有组件同步变化

内容的提问来源于stack exchange，提问作者madhu kari