angular - Itens de exibição e itens selecionados do multiseleção (p-multiselect)

Estou tendo problemas para exibir os itens atualmente selecionados (sempre retorna em branco) - provavelmente não estou percorrendo o objeto corretamente. No entanto, não tenho certeza sobre a melhor abordagem para isso. Tudo o que quero é que todas as opções sejam exibidas no multi-select e também os itens atualmente selecionados (por exemplo, do banco de dados).

Componente :

orders: any[] = [];

this.orderDetailService.getAllOrders().subscribe((orders) => {
  this.orders = orders;
});


private fetchOrderDetailData() {
  if (this.orderDetailId !== undefined) {
    this.orderDetailService.getOrderDetailById(this.orderDetailId).subscribe((orderDetail) => {
      console.log(orderDetail.DetailCategories);
      this.orderDetail = orderDetail;
    });
  } else {
    // Handle the case where this.order.OrderDetail?.Id is undefined
    console.error('OrderDetail Id is undefined');
  }
}

HTML :

<div>
    <p-multiSelect [options]="categories" [(ngModel)]="selectedCategories" defaultLabel="Select a Category" optionLabel="Name"
        display="chip"></p-multiSelect>
</div>

Atualmente :

• Capaz de exibir todas as opções
• NÃO mostra os itens atualmente selecionados (o que eu quero)
• Eventualmente, precisarei adicionar/remover estes

O console.log(orderDetail.DetailCategories); é aquele que exibe os itens atualmente selecionados e é um array de objetos. Array [ {…}, {…} ]. Além disso, o Category.Name é o que eu coloco como option.Label, mas para o array acima ele é chamado de CategoryName (então não é possível referenciar Name para esse).

Editar 1

Comportamento replicado:

https://primeng-multiselect-demo-cjrvx6.stackblitz.io

Observe que:

• Eu já tenho uma cidade que não é exibida por padrão no multiseleção. Se eu então escolher uma opção, você pode ver o valor selecionado, exceto que está vazio.

• Observe também que eu tenho uma convenção de nomenclatura diferente entre cidades e cidades selecionadas

O que eu quero é mostrar todas as cidades selecionadas por padrão junto com todas as outras opções (como uma chip no multiselecionável). Claro, com o nome da cidade. Eu terei a funcionalidade de adicionar/remover estas.

A razão para nomes diferentes é que meu projeto tem um relacionamento muitos para muitos com

• Entidade de Categorias para listar essas opções
• Tabela de junção OrderCategories para combinar os dois
• Entidade de Pedido contendo uma coleção de todas as entradas da tabela de junção

Resposta #1

Se você tiver diferentes tipos de dados nos itens selecionados e na lista de opções disponíveis, você pode usar optionValue para definir uma propriedade da lista como o ID, e no [(ngModel)], você pode passar um array desses IDs.

<!-- template -->
<p-multiSelect [options]="cities" 
    [(ngModel)]="selectedCities" 
    defaultLabel="Select a City" 
    optionLabel="CityName"
    optionValue="CityCode" 
    display="chip">

// component
cities = [
    { CityName: 'New York', CityCode: 'NY' },
    { CityName: 'Rome', CityCode: 'RM' },
    { CityName: 'London', CityCode: 'LDN' },
    { CityName: 'Istanbul', CityCode: 'IST' },
    { CityName: 'Paris', CityCode: 'PRS' },
];
selectedCities = ['NY', 'RM'];

Exemplo: https://stackblitz.com/edit/primeng-multiselect-demo-nnashy?file=src%2Fapp%2Fapp.component.html

Resposta #2

Eu honestamente tentei entender a essência da pergunta relendo o texto várias vezes... Mas, infelizmente, o significado me escapa XD.

Vou tentar sugerir uma ideia baseada no uso do MultiSelect.

Os seguintes atributos são necessários para a operação básica do MultiSelect:

• Input() opções: qualquer[]
• Valor - ngModel ou formControl

• se você usar Objeto(s) como opções:

  • optionLabel - chave da chave do rótulo no Objeto
  • optionValue - chave do valor na chave do Objeto

Na prática, eu uso todo Objeto como valor (não uso optionValue).

Eu voltarei ao seu exemplo.

opções <= categorias - Onde você preenche essa variável? valor <= categoriasSelecionadas - Onde você retorna essa variável?

Mby aqui devem haver pedidos como opções?