特定のビューでNativescriptのリストビューが更新されない

Question

私は、プロジェクトに関連する問題のリストを表示するためにアプリケーションを開発中です。アプリフローは次のように説明されています。

1. ユーザーはアプリにログインします。
2. 一覧表示されているプロジェクトの一覧が表示されます（正常に動作しています）。
3. プロジェクトセルをクリックすると、対応するプロジェクトに関連する問題が読み込まれます（問題がログに表示されても動作しません）。

リストビューの代わりに空白の画面が表示されるため、プロジェクトと問題の両方が同じ方法でリストされ、問題のビューに問題があるとわかりません。

プロジェクトサービスAPIにコメントすることで、プロジェクトコンポーネントから問題サービスAPIを呼び出すと、プロジェクトリストビューに問題リストが更新されます。問題のサービスは、プロジェクトビューの実装ファイルの正確なレプリカですが、それでもうまくいかないようです。両方のビューにコードをアタッチする。

プロジェクトビュー

1. projects.html

<GridLayout> 
 
     <ListView [items]="projects" class="small-spacing"  (itemTap)="onItemTap($event)"> 
 
      <template let-item="item"> 
 
       <Label [text]="item.projectName" class="medium-spacing">  </Label> 
 
      </template> 
 
     </ListView> 
 
</GridLayout>

プロジェクト-list.service.ts

import {Injectable} from "@angular/core"; 
import {Projects} from "./projects"; 
import {ApiBase} from "../../shared/apiBase/apibase"; 
import {Config} from "../utils/config" 
import {User} from "../user/user"; 

var applicationSettings = require("application-settings"); 

@Injectable() 
export class ProjectsService extends ApiBase { 
apiBase : ApiBase; 

loadProjects(callBack: (responseObject:any, authDetails: String)=>any) { 

    var url =Config.BASE_URL + "/projects.json"; 
    console.log("URL -" + url); 
    console.log("Auth -" + Config.AUTH_DATA_KEY); 
    this.getRequest(Config.AUTH_DATA_KEY, url, callBack); 

}

fetchIssues(callBack: (responseObject:any, authDetails: String)=>any) { 

    var url =Config.BASE_URL + "/issues.json?project_id=215" ; 
    console.log("URL -" + url); 
    console.log("Auth -" + Config.AUTH_DATA_KEY); 
    this.getRequest(Config.AUTH_DATA_KEY, url, callBack); 

}}

プロジェクト

。コンポーネント.ts

import {Component, OnInit} from '@angular/core'; 
import observable = require("data/observable"); 
import {Projects} from "../../shared/projects/projects"; 
import {ProjectsService} from "../../shared/projects/projects-list.service"; 
import {Router} from "@angular/router-deprecated"; 

var EventBus = require('eventbusjs'); 
@Component({ 
    selector: "projects", 
    providers: [ProjectsService], 
    templateUrl: "views/projects/projects.html", 
    styleUrls: ["views/projects/projects.css"], 
}) 
export class ProjectsPage implements OnInit { 
    projects = []; 
    constructor(private _projectsService: ProjectsService, private _router: Router) {} 

ngOnInit() { 
let projectsList = this.projects; 
var callback = function callback(response) { 

    JSON.parse(response.content).projects.forEach(project => { 
    projectsList.push(new Projects(project.id, project.name)); 
    console.log("project.name - " + project.name); 
    }) 
} 
    this._projectsService.loadProjects(callback); 


} 
    public onItemTap(args) { 
    console.log("------------------------ ItemTapped: " + this.projects[args.index].id); 
    this._router.navigate(["IssuesList", {projectID : this.projects[args.index].id}]); 
} 
} 

問題ビューに関連したファイルも同様です。しかし、私はリストビューが表示されていないので、問題ビューで何が問題であるのか理解できません。 issueビューに関連するファイルは次のとおりです。

<GridLayout> 
 
    <ListView [items]="issues" class="small-spacing" (itemTap)="onItemTap($event)"> 
 
    <template let-issue="issue"> 
 
     <Label [text]="issue.issueSubject" class="medium-spacing"></Label> 
 
    </template> 
 
    </ListView> 
 
</GridLayout>

1. isseus-list.service issues.html

   1. 。issues.compnent.tsにおけるTS

      import {Injectable} from "@angular/core"; 
      import {Issues} from "./issues"; 
      import {ApiBase} from "../../shared/apiBase/apibase"; 
      import {Config} from "../utils/config" 
      
      var applicationSettings = require("application-settings"); 
      
      @Injectable() 
      export class IssuesService extends ApiBase { 
          apiBase : ApiBase; 
      
          fetchIssues(callBack: (responseObject:any, authDetails: String)=>any) { 
          var url =Config.BASE_URL + "/issues.json?project_id=215" ; 
          console.log("URL -" + url); 
          console.log("Auth -" + Config.AUTH_DATA_KEY); 
          this.getRequest(Config.AUTH_DATA_KEY, url, callBack); 
          } 
      } 
      

   2. issues.component.ts

      import {Component, OnInit} from '@angular/core'; 
      import observable = require("data/observable"); 
      import {Issues} from "../../shared/issues/issues"; 
      import {IssuesService} from "../../shared/issues/issues-list.service"; 
      import {Router} from "@angular/router-deprecated"; 
      
      var EventBus = require('eventbusjs'); 
      @Component({ 
          selector: "issues", 
          providers: [IssuesService], 
          templateUrl: "views/issues/issues.html", 
          styleUrls: ["views/issues/issues.css"], 
      }) 
      export class IssuesPage implements OnInit{ 
          issues = []; 
          constructor(private _issuesService: IssuesService, private _router: Router) {} 
      
      ngOnInit() { 
          let issuesList = this.issues; 
          var i = 0; 
          var callback = function callback(response) { 
      
           JSON.parse(response.content).issues.forEach(issue => { 
          issuesList.push(new Issues(issue.id, issue.status.name, issue.tracker.name, issue.tracker.name)); 
          console.log("issue.name - " + issuesList[i].projectName); 
          i++; 
           }) 
          } 
          this._issuesService.fetchIssues(callback); 
          } 
          public onItemTap(args) { 
           console.log("------------------------ ItemTapped: " + this.issues[args.index].id); 
          //this._router.navigate(["IssuesList", {projectID : this.issues[args.index].id}]); 
          } 
      } 
      

   にconsole.log（）は、上記で与えられたように、リストビューが空白の間にデータを返しますスクリーンショット。誰も私がこの問題を解決するのを助けることができますか？前もって感謝します。あなたのngOnInitあなたが新しい値にthis.issuesに

   を割り当てないで

Answer 1

だから、あなたはあなたのcallback機能

... 
issues = []; 
var self = this; 
... 

    var callback = function callback(response) { 

     JSON.parse(response.content).issues.forEach(issue => { 
    issuesList.push(new Issues(issue.id, issue.status.name, issue.tracker.name, issue.tracker.name)); 

    self.issues = issuesList; 

    i++; 
     }) 
    } 
    this._issuesService.fetchIssues(callback); 
    }