Как передать выбранные флажки PrimgNg в раскрывающийся список дочерних компонентов?

Question

У меня есть простое приложение, использующее PrimeNg. Используя родительский и дочерний компоненты, я пытаюсь передать информацию из выбранных элементов родительского множественного выбора (<p-multiSelect/>) вниз в дочерний раскрывающийся список (<p-dropdown/>).

Я пытаюсь получить так, чтобы выбранные элементы в множественном выборе отображались как единственные варианты в раскрывающемся списке. Проблема здесь в том, что компонентам PrimeNg нужны метка и значение. Передача этих выбранных элементов приводит только к передаче значения, поэтому раскрывающийся список выглядит пустым.

This is what the PrimeNg dropdown requires and what is being used in the multi-select:

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

Using [(ngModel)]='selectedStatements on the parent's multiSelect, I am passing the selected items into the child component app-select-statement with the @Input() statements;. This works just as expected because I am getting the data passed down to my child component.

Однако, как упоминалось выше, раскрывающиеся элементы пусты, потому что @Input дочернего компонента получает только значение, а не значение и метку, как требуется для компонента Dropdown PrimeNg.

Есть ли способ получить всю информацию из multiSelect, чтобы раскрывающийся список в дочернем компоненте был заполнен?

ЗДЕСЬ - 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-statement.ts (дочерний компонент)

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

Answer 1

вывод выбранного Primeng - это строковый массив, а не массив объектов, поэтому вам нужно отобразить его внутри ngOnChanges в дочернем компоненте

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