Angular将服务数组从组件传递到角度为5的html

Question

我是角色5的新手，我已经创建了数据服务

service.ts：

import { Injectable } from '@angular/core';
import { prmDataField } from '../_models/index'

 @Injectable()
 export class prmService {

    prmDataFields = [
new prmDataField('Training & Recruitment', 'expenses', 'billNo', 'totalAmt')];
 }

component.ts：

import { prmService } from '../data.service';
constructor(private prmDataLabel: prmService) {}

compontent.html

这个头下有文本框，它们在service.ts中，我想将prmDataFields数据加载到此文本框的onload of page。

Answer 1

在您的组件中，您应该定义一个变量来保存prmDataFields：

prmDataFields = this.prmService.prmDataFields然后

使用ngFor循环遍历数组，以显示文本框的位置：

<div *ngFor="let dataField of prmDataFields">
    {{ dataField }}
</div>

Answer 2

在您的服务中：

getFields() {

  prmDataFields: any[] = [
    new prmDataField('Training & Recruitment', 'expenses', 'billNo', 'totalAmt')
  ];

  return prmDataFields;
}

在您的组件中：

this.fields = this.prmDataLabel.getFields()

模板：

<div *ngFor="let field of fields"> ... </div>

从Angular文档中查看此demo，了解动态表单应如何工作。阅读此演示的example也是一个好主意。