How to extract data from Ng Multiselect dropdown to from group-CodePudding

I am using Ng Multiselect Dropdown to select multiple data everything is working perfectly but I am facing issue with one thing and that is when users submits the data the data is uploaded but select option from drop down is stored like this [object] rather it should be stored with the selected option name

it is an issue with array decode can any one help me, below I have even shared the screenshot for the same

CodePudding user response：

I think it is all about how to iterate over your array of objects to view your objects properly, for example, if you have such data:

const ELEMENT_DATA: Element[] = [
  {
    checked: false,
    position: 1,
    item: [
      { item_id: 1, item_text: 'Item1' },
      { item_id: 2, item_text: 'Item2' },
      { item_id: 3, item_text: 'Item3' },
    ],
  },
  {
    checked: false,
    position: 2,
    item: [
      { item_id: 4, item_text: 'Item4' },
      { item_id: 5, item_text: 'Item5' },
      { item_id: 6, item_text: 'Item6' },
    ],
  },
];

Then you can iterate over item array as follows:

<ng-container matColumnDef="item">
      <mat-header-cell *matHeaderCellDef> Item </mat-header-cell>
      <mat-cell *matCellDef="let element">
      <ng-container *ngFor="let i of element.item">
          {{i.item_id}} , {{i.item_text}}
          <br>
          <br>
      </ng-container>
      </mat-cell>
</ng-container>

And these objects will be displayed like below:

Here is a working example:

https://stackblitz.com/edit/angular-hero-form-as-form-group-yzfwav?file=src/app/app.component.html