Nativescript listview 未在特定视图上更新

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>

1. projects-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);
   

   } }

2. projects.component.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}]);
    }
   }
   

与问题视图相关的文件也类似。但是我无法弄清楚问题视图有什么问题，因为没有显示列表视图。与问题视图相关的文件如下。

1. issues.html

<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.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}]);
       }
   }
   

issues.compnent.ts 中的 console.log() 在列表视图为空白时返回数据，如上面的屏幕截图所示。谁能帮我解决这个问题？提前致谢。

Answer 1

在您的 ngOnInit 中，您没有为 this.issues 分配新值

所以请确保你在 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);
  }

Answer 2

在更新数据时刷新 radlistview nativescript radlistview 刷新 <RadListView #myListView></RadListView>

@ViewChild("myListView") listViewComponent: RadListViewComponent; //每当你更新 dataItems 中的数据时使用它 this.listViewComponent.listView.refresh();