如何将 PrimeNg 选中的复选框向下传递到子组件下拉列表？答案

【问题标题】：How to pass PrimgNg selected checkboxes down to child component dropdown?如何将 PrimeNg 选中的复选框向下传递到子组件下拉列表？
【发布时间】：2020-06-17 21:09:01
【问题描述】：

我有一个使用 PrimeNg 的简单应用程序。使用 Parent 和 Child 组件，我试图将信息从 Parent 的 Multi-Select (<p-multiSelect/>) 的选定项目传递到孩子的 Dropdown (<p-dropdown/>)。

我正在尝试获取它，以便多选中的选定项目显示为下拉列表中的唯一选项。这里的问题是 PrimeNg 组件需要一个标签和一个值。传递这些选定的项目只会导致传递一个值，因此下拉列表显示为空白。

这是 PrimeNg 下拉菜单所要求的以及多选中使用的内容：

statements = [
  { label: 'Item1', value: 'item1' },
  { label: 'item2', value: 'item2' },
  { label: 'Item3', value: 'item3' },
  { label: 'Item4', value: 'item4' },
  { label: 'Item5', value: 'item5' },
];

在父级的 multiSelect 上使用[(ngModel)]='selectedStatements，我将选定的项目传递给带有@Input() statements; 的子组件app-select-statement。这可以按预期工作，因为我正在将数据传递给我的子组件。

<div>
    <p-multiSelect 
    [options]="statements" 
    [(ngModel)]="selectedStatements">
    </p-multiSelect>

    <app-select-statements [statements]='selectedStatements'></app-select-statements>
</div>

然而，如上所述，下拉项是空白的，因为子组件上的 @Input 只接收一个值，而不是 PrimeNg 的 Dropdown 组件所需的值和标签。

有没有办法从 multiSelect 中获取所有信息，以便填充子组件中的下拉菜单？

HERE is a StackBlitz 包含所有代码

AppComponent.ts

...
export class AppComponent {
  statements = [
    { label: 'Item1', value: 'item1' },
    { label: 'item2', value: 'item2' },
    { label: 'Item3', value: 'item3' },
    { label: 'Item4', value: 'item4' },
    { label: 'Item5', value: 'item5' },
  ];
}

select-statements.ts（子组件）

...
@Component({
  selector: 'app-select-statements',
  template: `
    <div> 
      <p-dropdown 
        placeholder="Choose"
        [options]="statements"></p-dropdown>
    </div>
  `,
})
export class StatementComponent {
  @Input() statements;
}

【问题讨论】：

标签： angular primeng

【解决方案1】：

primeng 的输出选择的是字符串数组而不是对象数组。所以你需要将它映射到子组件的 ngOnChanges 中

export class StatementComponent implements OnChanges {
  @Input() statements;
  ngOnChanges(){
    if(this.statements){
        this.statements=this.statements.map(v => ({ "label": v,"value":v }));
    }
  }
}

【讨论】：

谢谢。效果很好，符合预期