在 angular 中传递所选值的对象 4 / 5

Question

我对 angular 有点陌生，不确定这是否可行，但是 -

我在下拉列表中加载了一组对象。这个数组只向用户显示播放器的名称，当用户选择名称时，我想将所选名称的整个对象传递给控制台或 HTTP get 方法。但是，现在我只得到输入框内的值，而不是原来的整个对象字段。

object array as seen in the console

这是下拉菜单HTML一侧的代码

 <form [formGroup]="userForm1" (ngSubmit)="onSubmit1()">
      <div class="form-group">
    <label class="field field_type1">
      <input list="browsers" type="text" class="field__input form-control" placeholder="e.g. Melnikov Stanislav" formControlName="name1">
      <datalist id="browsers">

      <span class="field__label-wrap">
        <span class="field__label">Search Player</span>
      </span>
            <option *ngFor="let pointers of atkpointer" [ngValue]="pointers">{{pointers.Name}}</option>
      </datalist>
    </label>

    <div>
      <button type="submit" class="button type3">
      Submit
      </button>
    </div>
      </div>
    </form>

组件端代码：

onSubmit1(){
console.log(this.userForm1.value);
}

我得到的输出是：

OUTPUT that I'm getting

所以我在输出中真正想要的是 OVA、Balance、Crossing 和类似所选值的东西，而不是玩家的名字。但是我们需要使用名称来识别玩家

Answer 1

更新您在提交功能中的值。

onSubmit1(){
  const payload: any = this.userForm1.value;
  payload.user = this.atkpointer.find(u => u.name === payload.name1);
  console.log(payload);
}

您的选项值应该是简单的字符串，而不是完整的对象。我没有评论你 HTML 的有效性，但你肯定需要意识到这一点。

编辑仅存储对象：

onSubmit1(){
  const user: any = this.atkpointer.find(u => u.name === this.userForm1.value.name1);
  console.log(user);
}

在 angular 中传递所选值的对象 4 / 5

Pass Object of the selected value in angular 4 / 5

html

angular

select

angular2-forms

angular4-forms