将数据预加载到Angular 2表单中

Question

我是Angular 2开发的新手。我正在使用Visual Studio Angular SPA模板和.Net Core 2.0开发Angular应用程序。

我有这个组件的html文件：

<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文件：

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

我想将一些数据加载到表单中以允许用户编辑它，但它显示为行（我检索到行）但没有数据。

如果我删除了表单标签，它会显示带有数据的两行。

没有形式：

使用表格：

我是否需要做其他事情才能显示数据？

Answer 1

问题是这些字段没有名称或ID，这就是他们不显示数据的原因。

ChatsModel realmChats = realm.createObject(ChatsModel.class);
realmChats.addResponse(chatsModel.getItems());