Question

我想从数据库读取数据到html文件，但它没有显示数据。我有ProjectList组件如下：

 import {Component,OnInit,OnDestroy} from '@angular/core';
 import {NgControl} from '@angular/common'; // ?
 import {AppServiceProjectList} from '../services/app.service.projectlist';
 import {DateString} from '../utils/DateStringPipe';
 import { Router, ActivatedRoute } from '@angular/router';
 import {ROUTER_DIRECTIVES} from "@angular/router";

 @Component({

templateUrl: './app/components/projectlist.component.html',
  // styleUrls: ['./app/components/tbutentelist.component.css'],// s
pipes: [DateString],
directives: [ROUTER_DIRECTIVES],
  providers: [AppServiceProjectList] // i dont remember why we need a   provider here.
  })


  export class ProjectListComponent {


constructor(
    private _appServiceProjectList: AppServiceProjectList
    //private router: Router,
    // private route: ActivatedRoute,
    // private service: AppServiceProjectList
        ) { // The parameter simultaneously defines a private heroService property   and identifies it as a HeroService injection site.
    //  Now Angular will know to supply an instance of the HeroService when it creates a new AppComponent.

}


   get ProGTesListList(): Models.ProgTesList[] {
    return this._appServiceProjectList.ProgTesListList;
   }
}

及其Htmlfile

   <h2>Projects</h2>
   <div class="row">
  <div class="col-sm-4">
    <form>
    <table class="table table-bordered">
        <tr>

            <th colspan="2">My Projects</th>
        </tr>
        <tr>
            <td>Nr</td>
            <td>Name</td>
        </tr>
            <!--<a [routerLink]="['/projectmaster', ProgTesListItem.Nr]"        *ngFor="let ProgTesListItem of ProgTesListList"> -->

            <tr *ngFor="let ProgTesListItem of ProgTesListList">
                <td>{{ProgTesListItem.Nr}}</td>

                <td> {{ProgTesListItem.Des}} </td>

                <td>
                    <button type="button" class="btn btn-primary"
                            [(ngModel)]="singleModel" btnCheckbox
                            btnCheckboxTrue="1" btnCheckboxFalse="0">
                        delete
                    </button>
                </td>
            </tr>
      <!--  </a>-->

     </table>
        </form>
         <button class="btn btn-primary pull-right" (click)="redirect()">New project</button> <!-- I should do the redirect method-->
    </div>
 </div>

我从数据库中的ProgTes表中获取数据，这里是数据控制器 public ContentResult ProgTes（） { var projects = new List（）;

        using (SqlConnection con = new SqlConnection(WebConfigurationManager.ConnectionStrings["HabitatConnectionString"].ConnectionString))
        using (var reader = con.CreateReader("SELECT Anno,Nr,Des FROM ProgTes ORDER BY Nr")) // CreateReader is an extension method that I created in DbExtensions.cs 
        {
            while (reader.Read())
            {
                var project = new ProgTesList();

                project.Anno = reader.Field<short>("Anno");
                project.Nr = reader.Field<int>("Nr");
                project.Des = reader.Field<string>("Des");

                projects.Add(project);
            }
        }

             return      Content(Newtonsoft.Json.JsonConvert.SerializeObject(projects), "application/json");
    }

这是ProjectListService的代码。

  import {Injectable} from '@angular/core';
  import {Http} from '@angular/http';
  import {HttpHelpers} from '../utils/HttpHelpers';
  import {Observable} from 'rxjs/Observable';
  import 'rxjs/Rx'; // The Angular http.get returns an RxJS Observable.        Observables are a powerful way to manage asynchronous data flows.

 @Injectable()// emiton metadatat qe angulari mund te doje per te injktuar       dependencies te tjera ne sherbim.
  export class AppServiceProjectList extends HttpHelpers {

private _getProgTesListListUrl = 'Data/ProgTes';
private _ProgTesListList: Models.ProgTesList[];

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

    this.refresh();
}

get ProgTesListList(): Models.ProgTesList[] {

    return this._ProgTesListList;// is this function ok or should i write another function ??
}

  refresh() {
    this.getaction<Models.ProgTesList[]>      (this._getProgTesListListUrl).subscribe(
        result => {
            this._ProgTesListList = result;
        },
        error => this.errormsg = error);
}

Answer 1

看起来这里有几件丢失的东西：

您需要ProgTesListList

引用本地变量*ngFor

export class ProjectListComponent {
  ...
  ProgTesListList = [];
  ...
}

但是，它可能不是Array，而是Observable<Array>>，具体取决于您将如何使用它。

下一步：

get ProGTesListList(): Models.ProgTesList[] {
  return this._appServiceProjectList.ProgTesListList;
}

这里出了点问题。查看get and set in TypeScript了解如何使用get/set的方法。它还引用了错误的变量。

然后：AppServiceProjectList的代码丢失了，所以很难说它应该如何使用。

从List中读取数据

1 个答案: