Angular 5中如何将服务数组从组件传递到HTML并加载至文本框

Hey there! Since you're new to Angular 5, let's break down exactly how to load your service's prmDataFields data into your text boxes when the page loads. Here's the step-by-step solution:

1. Update Your Component to Fetch the Data #

First, we'll use Angular's ngOnInit lifecycle hook (this is the proper place to initialize data, instead of the constructor) to pull the data from your service and store it in a component variable that your template can access.

Modify your component.ts like this:

import { Component, OnInit } from '@angular/core';
import { prmService } from '../data.service';
import { prmDataField } from '../_models/index'; // Import your model for strong typing

@Component({
  selector: 'app-your-component', // Replace with your component's actual selector
  templateUrl: './your-component.component.html' // Replace with your template's path
})
export class YourComponent implements OnInit {
  // Declare a typed variable to hold the service data
  prmFields: prmDataField[];

  constructor(private prmDataLabel: prmService) {}

  ngOnInit(): void {
    // Fetch the data from the service when the component finishes initializing
    this.prmFields = this.prmDataLabel.prmDataFields;
  }
}

2. Bind Data to Your Text Boxes in the Template #

Now you can connect the component's prmFields variable to your text boxes in component.html. Since your service's array has one item right now, we can directly access the first element. We'll also cover how to handle multiple items later.

Single Item (Current Setup):

Assuming your prmDataField class defines properties matching its constructor parameters (like label, category, billNo, totalAmt), bind each property to a text box:

<!-- Label text box -->
<input type="text" [value]="prmFields[0].label" placeholder="Label">

<!-- Category text box -->
<input type="text" [value]="prmFields[0].category" placeholder="Category">

<!-- Bill Number text box -->
<input type="text" [value]="prmFields[0].billNo" placeholder="Bill No">

<!-- Total Amount text box -->
<input type="text" [value]="prmFields[0].totalAmt" placeholder="Total Amount">

Two-Way Binding (Allow User Edits):

If you want users to edit the values and have those changes sync back to the component variable, use [(ngModel)] instead of [value]. First, you need to import FormsModule in your Angular module:

// In your app.module.ts or feature module
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ... other existing imports
    FormsModule
  ]
})

Then update the template:

<input type="text" [(ngModel)]="prmFields[0].totalAmt" placeholder="Total Amount">

Multiple Items (Future-Proofing):

If you ever add more entries to prmDataFields, use *ngFor to loop through the array and render a set of text boxes for each item:

<div *ngFor="let field of prmFields">
  <input type="text" [value]="field.label" placeholder="Label">
  <input type="text" [value]="field.category" placeholder="Category">
  <input type="text" [value]="field.billNo" placeholder="Bill No">
  <input type="text" [value]="field.totalAmt" placeholder="Total Amount">
</div>

Quick Checks to Avoid Issues #

• Ensure your prmService is provided in your Angular module: either add it to the providers array of your module, or use providedIn: 'root' in the service's @Injectable() decorator.
• Double-check your prmDataField class properly exposes properties from its constructor (using public in the constructor parameters automatically creates class properties):

  export class prmDataField {
    constructor(
      public label: string,
      public category: string,
      public billNo: string,
      public totalAmt: number
    ) {}
  }
  

内容的提问来源于stack exchange，提问作者Dhawal Mhatre