时间戳

首页 > 解决方案 > 我无法填充选择

angular - 我无法填充选择

问题描述

我有数据可以在 Angular 中填充选择，我正在使用我在互联网上看到的示例，但在 html 上看不到任何内容。未来的数据将来自服务，但我试图首先使用这些编码数据进行测试。最初，该示例使用 ngModel 进行通信，但这会导致错误。所以我尝试用 formGroup 替换它，但我现在不知道在那里输入什么。

     areas: Area = {
        id: 1,
        nombre: "Contabilidad"
      };
    
     onSelect(id: any): void{
        console.log('id ', id);
      }
    
<form class="theForm" (ngSubmit)="onSubmit()" [formGroup]="myForm">

    <br><br>
    <label >Area </label><br>
          <select [formGroup]="myForm." (change)="onSelect($event.target.value)">
              <option *ngFor="let area of areas" value={{areas.id}}>
                 {{areas.nombre}}
              </option>
    </select>
    <br><br>

错误：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

this.form._updateTreeValidity is not a function

来自服务的数据将是 id、names 的集合

标签： angulartypescriptformsselect

解决方案

首先，您的 TypeScript 问题。你的数组定义是错误的。您正在创建一个objectnot array。所以，你的areas数组应该是：

areas: Area[] = [
    { id: 1, nombre: 'Contabilidad' },
    { id: 2, nombre: 'RRHH' },
    { id: 3, nombre: 'Finanzas' }
]

角部分。您正在使用Angular Reactive Forms，请务必先检查一下。你的标记是错误的。首先，您应该myForm使用提供的FormGroup/ FormBuilderAPI 创建一个对象并创建一个nombreAreaFormControl：

...

import { FormBuilder, Validators } from "@angular/forms";

...

export class AreaComponent {

  constructor(public fb: FormBuilder) { }

  ...

  myForm = this.fb.group({
    nombreArea: [null]
  });

  onSelect(event) {
    console.log(event);
  }

}

也就是说，你select必须是 a FormControl，而不是 a FormGroup。像这样：

<select class="area-select" (change)="onSelect($event)" formControlName="nombreArea">
   <option value="" disabled>Seleccionar Area</option>
   <option *ngFor="let area of areas" [ngValue]="area.id">{{area.nombre}}</option>
</select>

这样，它应该呈现一个select带有“默认”选项（Seleccionar Area）的元素，显示area.name并选择作为值area.id

反应式表单有点冗长，但一旦你掌握了它们，它们就会非常有用。

推荐阅读