データを角度2の形式にプリロードする

Question

私は角度2の開発で初心者です。私はVisual Studio Angular SPAテンプレートと.Net Core 2.0を使ってAngularアプリケーションを開発しています。

私は、このコンポーネントのhtmlファイルがあります：私は、ユーザーがそれを編集できるようにフォームにいくつかのデータをロードしたいのですが、それが示し

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

：

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

とそのtypescriptファイルを行（私は行に取得する）がデータなし。

フォームタグを削除すると、データとともに2つの行が表示されます。フォームなし

：フォームで

---

：

---

は、私は、データを表示するために何かを行う必要がありますか？

Answer 1

問題はフィールドに名前やIDがないため、データが表示されないことです。

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