javascript - 如何使用项目数组中的角度 8 从选择多下拉列表中仅获取电子邮件 ID

Question

我在 angular8 项目中使用带有 bootstrap4 和 jquery 的多选下拉菜单。根据下拉列表中的值选择，我得到输出，因为这里我有一系列项目，所以只需要在项目数组中获取电子邮件。

["0: '[e-mail]'", "1: '[e-mail]'", "2: '[e-mail]'"]

但我需要输出是[[e-mail], [e-mail], [e-mail]] 任何人都可以帮助我做到这一点吗？

TS：

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

演示

这里它包含项目数组，每个选定的值都获取对象的索引和该特定对象的 emailId。

HTML：

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

标签： javascriptangular

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: "[e-mail]"
    },
    { id: 2, userName: "user2", email: "[e-mail]" },
    { id: 3, userName: "uyuuy", email: "[e-mail]" },
    { id: 2, userName: "user2", email: "[e-mail]" }
  ];
  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);
  }
}

我可以添加它并选择它。