リストのデータをangular2で読み込む

Question

データベースからhtmlファイルにデータを読み込みたいが、データは表示されない。 以下のようにIはProjectList成分を有する：私は、データベース内ProgTesテーブルからデータを取得し、ここで 公共ContentResultのProgTesのデータcontrolloer（ある

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> 

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

ここに夫婦不足しているものがあるように見える：

あなたはしかし、それはArrayではなく、Observable<Array>>、ではないかもしれない*ngFor

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

によって参照されるローカル変数ProgTesListListが必要あなたはそれをどのように使用するかによって決まります。

次へ：

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

何かがここで間違っています。 get/setの使い方については、get and set in TypeScriptをチェックしてください。間違った変数も参照します。

コード：AppServiceProjectListのコードがありません。どのように使用するかは分かりません。