用数组填充下拉框时遇到问题答案

【问题标题】：face issue while filling a dropdownbox with an array用数组填充下拉框时遇到问题
【发布时间】：2018-07-31 15:37:32
【问题描述】：

我有以下数组：

testArray=[1,2,3,4]

以及下面的 HTML 代码：

      <div >
        <select>
        <option *ngFor="let obj of testArray"
               name="mission"
               formControlName="mission"
               (click)="onMissionClick(mission)"
                [value]="obj"
               >
          {{obj}}

        </option>
        </select>
    </div>

输出是一个下拉列表，只有 testArray 的第一个两个值是：1、2。然后我得到以下错误：

BasicInfoDPComponent.html:39 ERROR Error: No value accessor for form control with name: 'mission'
    at _throwError (forms.js:1591)
    at setUpControl (forms.js:1501)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4037)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:4542)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:4492)
    at checkAndUpdateDirectiveInline (core.js:8941)
    at checkAndUpdateNodeInline (core.js:10209)
    at checkAndUpdateNode (core.js:10171)
    at debugCheckAndUpdateNode (core.js:10804)
    at debugCheckDirectivesFn (core.js:10764)

注意：您可能注意到我需要将下拉菜单放入表单中，Out of form 可以正常工作。

【问题讨论】：

标签： javascript html angular mean-stack

【解决方案1】：

将 name 和 formControlName 移动到 select 元素。这是实际的输入：

<select  name="mission"
         formControlName="mission">
    ...
</select>

【讨论】：

你救了我！我坐在这里 2 个小时试图解决这个问题。谢谢谢谢谢谢你。

【解决方案2】：

你可以使用类似下面的东西。

<div >
    <select (change)="onMissionClick($event)">
    <option *ngFor="let obj of testArray"
            [value]="obj">
      {{obj}}
    </option>
    </select>
</div>

并在 TS 文件中通过event.target.value 访问选定的值。

也可以查看link

【讨论】：

【解决方案3】：

**In component Add** 
  mission =  [];


 ngOnInit() {
    this.mission =  [1,2,3];

    this.formProfile = this.fb.group({

      mission :  this.fb.array([]),
    });
  }

**In view add below code:**

 <select formControlName="mission">
          <option *ngFor="let data of mission"   

          > {{data}} </option>
      </select>

【讨论】：