Question

更新：我认为如果我只是用一个Gist来分享正在使用的代码会更容易。

代码：https://gist.github.com/strawmr/15a22bf5118642ff130f215511982b80

ORIGINAL：我正在开发一个新系统，可以直接读取数据并将数据直接更新到数据库。部分内容涉及Angular 2和Typescript。

在开发过程中，我遇到了一个没有加载信息的问题。它只向我展示了＃34;装载事件＆＃34;用作元素标记内的占位符。

我可能会遗漏哪些因素导致数据无法显示或代码本身无法正常运行？以下是代码段。

incident.service.ts

import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";
import { SpringfieldService } from "./springfield.service";
import "rxjs/add/operator/map";
import { Incident } from "./incident";

@Injectable()
export class IncidentService extends SpringfieldService {
private url = this.baseUrl + "Incident";

constructor(private http: Http) {
    super();

}

getAll() {
    return this.http.get(this.url)
        .map((res: Response) => res.json());
}

getIncident(incidentId: number) {
    return this.http.get(this.url, incidentId)
        .map((res: Response) => res.json());
}

saveIncident(incident: Incident) {
    return this.http.put(this.url, incident)
        .map((res: Response) => res.json());
}

addIncident(incident: Incident) {
    return this.http.post(this.url, incident)
        .map((res: Response) => res.json());
}

deleteIncident(incident: Incident) {
    return this.http.delete(this.url, incident)
        .map((res: Response) => res.json());
}

}

incident.component.ts

import { Component } from "@angular/core";
import { IncidentService } from "./incident.service";
import { Incident } from "./incident";

@Component({
selector: "rpcs-incident",
templateUrl: "/app/incident.component.html",
providers: [IncidentService]
})
export class IncidentComponent {
private incidents: Incident[];

constructor(incidentService: IncidentService) {
    incidentService.getAll()
        .subscribe(
        response => this.incidents = response,
        err => console.log("Error: ", err),
        () => console.log("Fetch incidents complete.", this.incidents)
        );
}

}

incident.component.html

<div class="incidentarticle" *ngFor="let incident of incidents; let i =    index; trackBy: incidentId">
<h2>
    {{incident.IncidentId}}
    <span class="glyphicon glyphicon-edit" (click)="onEdit()"></span>
</h2>
<h3 *ngIf="incident.DateReported != null">Start: {{incident.DateReported | date:'medium'}}</h3>


<!--<div> <span>Applies To:</span> {{newsitem.AppliesTo}}</div>-->


<div>
    <span>Description:</span> {{incident.IncidentDescription}}
</div>

<!--<div>
    <span>Action Required:</span> {{newsitem.ActionRequired}}
</div>

<div><span>For Further Information:</span> {{newsitem.AdditionalInfo}}</div>-->

从数据库访问数据以显示

0 个答案: