Question

我正在尝试在另一页中显示窃听项的硬编码数组列表中的数据。我试图创建具有约束力的上下文，但是它对我有用，请帮帮我。

home.component.html

<ListView class="list-group" [items]="asmaulhusna" (itemTap)="onItemTap($event)">
    <ng-template let-asmaulhusna="item">
        <FlexboxLayout flexDirection="row" class="list-group-item">
            <GridLayout columns="*, *">
                <Label [text]="asmaulhusna.name" col="1" class="list-group-item-heading title rtl"
                    verticalAlignment="center"></Label>
                <StackLayout orientation="vertical" col="0">
                    <Label [text]="asmaulhusna.subtitle" class="list-group-item-heading sub-title"
                        verticalAlignment="center"></Label>
                    <Label [text]="asmaulhusna.description" class="list-group-item-heading description"
                        verticalAlignment="center"></Label>
                </StackLayout>
            </GridLayout>
        </FlexboxLayout>
    </ng-template>
</ListView>

home.component.ts

import { ItemEventData } from "tns-core-modules/ui/list-view"
import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { Router, NavigationExtras } from "@angular/router";

export class HomeComponent implements OnInit {
    asmaulhusna: { name: string, subtitle: string, description: string }[] = [
        { name: "Title name", subtitle: "easy", description: "adf", },
    ];


    public constructor(
        public routerextensions: RouterExtensions
    ) { }

    onItemTap(args): void {
        this.routerextensions.navigate(["detail"],args);
    }

    ngOnInit(): void {
    }
}

detail.component.html

<ScrollView class="page">
    <StackLayout class="home-panel">
        <Label [text]="asmaulhusna.name"></Label>
    </StackLayout>
</ScrollView>

Answer 1

由于您使用的是Angular，请尝试使用Angular处理数据的方式。可能是您可以将项目列表放入服务中，从该服务中获取项目列表以加载列表视图。在详细信息组件中，使用路由器的id参数，无论服务中的阵列中与给定id匹配的哪个项目，都将其加载到屏幕上。如果引用hello world Angular模板，则将找到完全相同的示例代码。

onItemTap(args): void {
  const listItem = args.view.bindingContext;
  console.log(listItem.name);
  // Assuming you have a unique id for each item
  this.routerextensions.navigate(["/detail", listItem.id]);
}

如何获取被轻击的列表项的上下文以在Nativescript TS的另一页中显示详细信息

1 个答案: