Question

我有一个带有很多选择选项的表格。我需要填充这些。最初是通过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。

有没有一种方法可以为我需要的每个选择填充数组并遍历每个项目。

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的表单中填充选择选项

1 个答案: