Angular2 Nativescript：如何在点击时传递 ListView 项目答案

【问题标题】：Angular2 Nativescript: how to pass ListView item on tapAngular2 Nativescript：如何在点击时传递 ListView 项目
【发布时间】：2016-11-16 16:34:59
【问题描述】：

我有以下代码：

  <ListView [items]="newsList" (itemTap)="onTap($event)" class="list-group">
    <template let-dataitem="item" let-i="index">
      <GridLayout class="list-group-item">
          <Label [text]="dataitem.title"></Label>
          <Label [text]="dataitem.body"></Label>
       </GridLayout>
    </template>
  </ListView>

我想用 onTap 方法抓取这个列表项。这是我的 onTap 方法所在的组件：

@Component({
   selector: "my-app",
   templateUrl: "app.component.html",
   styleUrls: ["app.component.css"],
   providers:[NewsService]
})

export class AppComponent {
  newsList;
  constructor(private router: Router, news: NewsService) {
     this.isLoading = true;
     news.getNews().subscribe(data => {
        this.newsList = data;
     })
  }

  public onTap(item: any) {
     this.isLoading = true;
     let navExtras: NavigationExtras = {
        queryParams:{
            "data" : item
        }
     }
     this.router.navigate(['/details'],navExtras);
  }
}

在详细信息组件上，我只是订阅 queryParams

this.route.queryParams.subscribe(params => {
   this.data = params['data'];
});

并显示数据..但不显示undefined。我在做什么错，以及如何让数据传递。

【问题讨论】：

不确定您的数据结构或详细视图 html，但在我的应用程序中，我映射了传递给详细视图的数据的详细信息，例如this.singleImage = this.route.queryParams .map( params => params['photo'] || 'None'); 然后显示为：<Image class="wall-cover" [src]="singleImage | async" stretch="aspectFit"></Image>

标签： listview angular nativescript

【解决方案1】：

你在模板中声明了let-dataitem="item"，所以在声明之后你需要监听点击事件：

<ListView [items]="newsList" class="list-group">
    <template let-dataitem="item" let-i="index">
      <GridLayout (tap)="onTap(dataitem)" class="list-group-item">
          <Label [text]="dataitem.title"></Label>
          <Label [text]="dataitem.body"></Label>
      </GridLayout>
   </template>
</ListView>

【讨论】：

Ignore - 它是dataitem，与let-item的赋值相同