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

Angular 5是一种流行的前端开发框架，它提供了丰富的功能和工具来构建现代化的Web应用程序。FormArray是Angular中的一个表单控件，用于处理动态的表单数组。在这个问答内容中，我们需要从数据库获取数据并使用FormArray来显示行。

首先，我们需要确保已经建立了与数据库的连接，并且可以通过API或其他方式获取数据。接下来，我们可以使用Angular的HttpClient模块来发送HTTP请求并获取数据。

在Angular中，我们可以创建一个服务来处理数据获取的逻辑。在这个服务中，我们可以使用HttpClient模块发送GET请求来获取数据。以下是一个示例代码：

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地址
  }
}

在组件中，我们可以使用这个服务来获取数据并将其存储在FormArray中。以下是一个示例代码：

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]
        }));
      });
    });
  }
}

在上述代码中，我们首先创建了一个FormGroup，并在其中创建了一个FormArray来存储行数据。然后，我们使用DataService来获取数据，并将每一行数据添加到FormArray中。

在模板中，我们可以使用FormArray的controls属性来遍历并显示每一行的数据。以下是一个示例代码：

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

在上述代码中，我们使用ngFor指令来遍历FormArray的controls，并使用formGroupName指令来指定每一行的FormGroup。

至此，我们已经完成了从数据库获取数据并使用FormArray来显示行的过程。根据具体的业务需求，你可以根据需要对表单进行进一步的处理和操作。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）、腾讯云数据库MySQL（CDB）、腾讯云API网关（API Gateway）等。你可以通过访问腾讯云官方网站（https://cloud.tencent.com/）了解更多关于这些产品的详细信息和使用指南。