Angular 5 FormArray从数据库获取数据并显示行

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {
  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get('api/data'); // 替换为实际的API地址
  }
}

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';
import { DataService } from './data.service';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder, private dataService: DataService) { }

  ngOnInit() {
    this.form = this.formBuilder.group({
      rows: this.formBuilder.array([])
    });

    this.dataService.getData().subscribe((data: any[]) => {
      const rows = this.form.get('rows') as FormArray;
      data.forEach(row => {
        rows.push(this.formBuilder.group({
          // 在这里定义表单控件，例如：
          name: [row.name],
          age: [row.age]
        }));
      });
    });
  }
}

<form [formGroup]="form">
  <div formArrayName="rows">
    <div *ngFor="let row of form.get('rows').controls; let i = index">
      <div [formGroupName]="i">
        <!-- 在这里显示每一行的数据，例如： -->
        <input formControlName="name" placeholder="Name">
        <input formControlName="age" placeholder="Age">
      </div>
    </div>
  </div>
</form>