Как получить только идентификатор электронной почты из раскрывающегося списка выбора, используя angular 8 из массива элементов

Question

Я использую раскрывающийся список с несколькими вариантами выбора с bootstrap4 и jquery в проекте angular8. На основе выбора значений в раскрывающемся списке я получаю результат: Здесь у меня есть массив элементов, поэтому мне нужно получать только электронную почту в массиве элементов.

["0: 'email1@gmail.com'", "1: 'email2@gmail.com'", "2: 'email3@gmail.com'"]

, но мне нужно, чтобы результат был [email1@gmail.com, email2@gmail.com, email3@gmail.com] может ли кто-нибудь помочь мне в этом?

TS:

 $('#multiselectUser').multiselect({
        buttonWidth: '400px'
      }).on('change',(e)=>{
         var selectedUser = $('#multiselectUser').val();
          console.log(selectedUser,"selectedUser")
      })

DEMO

Здесь он содержит массив элементов, и каждое выбранное значение получает index объекта и emailId этого конкретного объекта.

HTML:

<select name="user" id="multiselectUser" multiple="multiple"  >
              <option *ngFor="let field of user" [value]="field.email" >
                  {{field.userName}}</option>
          </select>

Answer 1

Удалите ngModel и попробуйте. Вы можете проверить рабочий код здесь

app.component. html

    <form  >
       <div class="form-group">
          <label for="">Select User</label>
          <select name="user" id="multiselectUser" multiple="multiple" (change)="selecteduser($event)">
              <option *ngFor="let field of user" [value]="field.email" >
                  {{field.userName}}</option>
          </select>
      </div>
    </form>

app.component.ts

import { Component } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { CurrencyPipe, DatePipe } from "@angular/common";
declare var $;

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  user: any = [
    {
      id: 1,
      userName: "user",
      email: "email1@gmail.com"
    },
    { id: 2, userName: "user2", email: "email2@gmail.com" },
    { id: 3, userName: "uyuuy", email: "email3@gmail.com" },
    { id: 2, userName: "user2", email: "email4@gmail.com" }
  ];
  public eoInfoForm: FormGroup;
  selectedUsers: any;

  constructor(private FB: FormBuilder) {}

  ngOnInit() {
    this.initEoForm();
    setTimeout(() => {
      $("#multiselectUser")
        .multiselect({
          buttonWidth: "400px"
        })
        .on("change", e => {
          var selectedUser = $("#multiselectUser").val();
          console.log(selectedUser, "selectedUser");
        });
    }, 100);
  }
  initEoForm() {
    //Add
    this.eoInfoForm = this.FB.group({
      effectiveDate: ["", Validators.required]
    });
  }
  selecteduser(event) {
    alert(this.selectedUsers);
  }
}

Я могу добавить и выделить все.

Answer 2

Использование модуля реактивных форм и модуля angular выбора материала

TS:
    data:String[]=[
                {id:"1",name:'Boots'}, 
                {id:"2",name:'Clogs'}, 
                {id:"3",name:'Loafers'}, 
                {id:"4",name:'Moccasins'}, 
                {id:"5",name:'Sneakers'},
                ];

    frmStepOne: FormGroup;
      constructor(private _formBuilder: FormBuilder) {   
         this.frmStepOne = this._formBuilder.group({
          selectedshoes:['']
        });
      }
      ngOnInit() {

      }
      onSubmit(){
          console.log(this.frmStepOne.value.selectedshoes);
        }
HTML:
    <form [formGroup]="frmStepOne" (ngSubmit)="onSubmit()">
        <div>
            <mat-form-field>
                <mat-label>Select shoes</mat-label>
                <mat-select formControlName="selectedshoes" multiple>
                  <mat-option *ngFor="let shoe of data" [value]="shoe.name">{{shoe.name}}</mat-option>
                </mat-select>
              </mat-form-field>
        </div>
        <div>
            <button type="submit">Submit</button>
        </div>
    </form>