如何将 PrimgNg 选中的复选框向下传递到 child 组件下拉列表？

Question

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

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

这是 PrimeNg 下拉菜单的要求，也是 multi-select 中使用的内容：

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

在 parent 的 multiSelect 上使用 [(ngModel)]='selectedStatements，我将选定的项目传递到带有 @Input() statements; 的 child 组件 app-select-statement。这正如预期的那样工作，因为我 am 将数据传递到我的 child 组件。

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

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

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

有没有什么方法可以从 multiSelect 中获取所有信息，以便填充 child 组件中的下拉列表？

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（child 分量）

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

Answer 1

所选 primeng 的输出是字符串数组而不是对象array.So您需要将其映射到子组件的 ngOnChanges 中

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

如何将 PrimgNg 选中的复选框向下传递到 child 组件下拉列表？

How to pass PrimgNg selected checkboxes down to child component dropdown?

primeng

angular

AppComponent.ts

select-statements.ts（child 分量）