Lade Daten in Angular 2 vor Form

Question

Ich bin ein Neuling in der Entwicklung von Angular 2. Ich entwickle eine Angular-Anwendung mit Visual Studio Angular SPA-Vorlage und mit .Net Core 2.0.

Ich habe diese Komponente HTML-Datei:

<h1>L&iacute;neas</h1> 

<p>This component demonstrates fetching data from the server.</p> 

<p *ngIf="!lines"><em>Loading...</em></p> 
<form #lineForm="ngForm"> 
    <table class='table' *ngIf="lines"> 
     <thead> 
      <tr> 
       <th>Line Id</th> 
       <th>Name</th> 
       <th>Line Reference Id</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="let line of lines"> 
       <td>{{ line.lineId }}</td> 
       <td><input [(ngModel)]="line.name" placeholder="name" required></td> 
       <td><input [(ngModel)]="line.lineReferenceId" placeholder="lineReferenceId" required></td> 
      </tr> 
     </tbody> 
    </table> 

    <button type="submit" class="btn btn-success">Submit</button> 
</form> 

Und seine Typoskript-Datei:

import { Component, Inject } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Component({ 
    selector: 'line', 
    templateUrl: './line.component.html' 
}) 
export class LineComponent { 
    public lines: Line[]; 

    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) { 
     http.get(baseUrl + 'api/Line').subscribe(result => { 
      this.lines = result.json() as Line[]; 
     }, error => console.error(error)); 
    } 
} 

interface Line { 
    lineId: number; 
    name: string; 
    lineReferenceId: string; 
} 

ich einige Daten in das Formular laden möchten Benutzer erlauben, um es zu bearbeiten, aber es zeigt, Zeilen (ich erfasse Zeilen) aber ohne Daten.

Wenn ich die Formular-Tags entfernen, zeigt es die zwei Zeilen mit den Daten.

Ohne Form:

---

Mit Form:

---

Muss ich noch etwas anderes tun, um die Daten zu zeigen?

Answer 1

Das Problem war, dass die Felder keinen Namen oder eine ID haben, deshalb zeigen sie die Daten nicht.

<tbody> 
    <tr *ngFor="let line of lines"> 
     <td>{{ line.lineId }}</td> 
     <td><input [(ngModel)]="line.name" placeholder="name" required name="name-{{line.lineId}}"></td> 
     <td><input [(ngModel)]="line.lineReferenceId" placeholder="lineReferenceId" name="lineReferenceId-{{line.lineId}}" required></td> 
    </tr> 
</tbody>