Question

我有以下数组：

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)

注意：您可能已经注意到，我需要将下拉列表放入表格中，表格过时效果很好。

Answer 1

将名称和 formControlName 移至 select 元素。这是实际的输入：

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

Answer 2

您可以使用类似以下的内容。

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

和 TS 文件中的访问通过event.target.value选择的值。

也请检查此link

Answer 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>

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

3 个答案: