如何在 Angular 中的表单中填充 select 选项

Question

我有一个包含许多 select 选项的表单。我需要填充这些。最初通过 JSON，但稍后我将从我的数据库中填充。

我该怎么做。

这将是我的 html。

<div class="container mt-4">
  <div class="card">
    <form>
        <div class="card-header">Search for a Property</div>
        <div class="card-body">

          <!-- County and Town Label-->
          <div class="row">
            <div class="col-md-6">
              <label class="ml-1" for="county">County</label>
            </div>
            <div class="col-md-6">
              <label for="town">Town</label>
            </div>
          </div>

          <div class="row">
            <!-- County Column -->
            <div class="col-md-6">
              <select class ="form-control" id="county" name="county">
              </select>
            </div>
            <div class="col-md-6">
              <select class="form-control" name="town">
              </select>
            </div>
          </div>

        </div>
    </form>
  </div>
</div>

这将是我的 js。

有没有办法只为我需要的每个 select 填充数组并循环遍历每个项目。

export class PropertySearchComponent implements OnInit {

  searchForm: FormGroup;

  constructor(private advertService: AdvertService, private alertify: AlertifyService, private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.createSearchForm();
  }

  createSearchForm() {
    this.searchForm = this.formBuilder.group({
      town: [, Validators.required],
      county: [, Validators.required],
    });
  }
}

Answer 1

您需要在 .ts 文件中填充一些数组（我假设您使用的是 TypeScript），例如这个：

counties: string[] = ['County1', 'County2', 'County3'];

然后在模板文件中：

<select class ="form-control" id="county" name="county">
  <option value="">Please select a county</option>
  <option *ngFor="let county of counties"
          [value]="county">{{county}}
  </option>
</select>

Angular 只需要知道要循环的内容并在您的模板中引用它。这是一个很好的参考：https://codecraft.tv/courses/angular/forms/model-driven/

如何在 Angular 中的表单中填充 select 选项

How do I populate a select options in a form in Angular

javascript

select

html-select

angular