用angular切换本机脚本中的listview内容 [英] toggle listview content in nativescript with angular

问题描述

当我用本机脚本单击各个按钮时，我需要在列表视图中切换单个内容，我在下面添加了我的代码.如果有人知道，请回答我.预先感谢

hi i need to toggle individual content in listview when the respective button is clicked in nativescript angular, i added bellow my code. if anyone know please answer me. thanks in advance

 import { Component, OnInit } from "@angular/core";

import { Item } from "./item";
import { ItemService } from "./item.service";

@Component({
    selector: "ns-items",
    moduleId: module.id,
    templateUrl: "./items.component.html",
})
export class ItemsComponent implements OnInit {
    items: Item[];
    isList = true;

    toggle(){
        this.isList = !this.isList;

 }

    constructor(private itemService: ItemService) { }

    ngOnInit(): void {
        this.items = this.itemService.getItems();
    }

}

还有我的items.component.html

and here my items.component.html

<ActionBar title="My App" class="action-bar">
</ActionBar>
<StackLayout class="page">


     <ListView [items]="items" class="list-group">
      <template let-item="item">
     <GridLayout columns="auto,auto" width="210" height="210"  >
            <Label  [text]="item.name"  col="0"
                class="list-group-item" visibility="{{isList ? 'visible' : 'collapse'}}"></Label>
                <Button [text]="isList ? 'hide' : 'Show'"  col="1" (tap)="toggle()"></Button>

           </GridLayout>
        </template>

    </ListView>


</StackLayout>

这里的问题是，当我单击按钮时，所有标签都被切换.所以我需要动态生成变量.我是个初学者，所以有人可以帮助我吗?预先感谢.

here problem is when i click the button all the labels are toggle. so i need to generate the variable dynamically. i m very beginner so anyone can help me? thank in advance.

推荐答案

猜想您已经修改了入门模板.因此，如果您想在特定列表项上隐藏标签，请尝试此操作.

Guess you have modified the starter template. So if you want hide label on particular list item, try this.

将 visible 属性添加到 item.ts

export class Item {
    id: number;
    name: string;
    role: string;
    visible: boolean;
}

在 item.service.ts 中将值设置为 visible .如下所示.

Set value to visible in your item.service.ts. It will be like below.

 { id: 1, name: "Ter Stegen", role: "Goalkeeper", visible: true },
 { id: 3, name: "Piqué", role: "Defender", visible: true },

您的列表模板应为

 <template let-item="item">
      <GridLayout class="list-group-item" columns="*,auto">
         <Label col="0" [text]="item.name" [visibility]="item.visible ? 'visible' : 'collapse'"></Label>
         <Button class="btn" col="1" [text]="item.visible ? 'Hide' : 'Show'" (tap)="toggle(item)"></Button>
      </GridLayout>
 </template>

最后，toggle方法将成为

And finally the toggle method will be,

ngOnInit(): void {
    this.items = this.itemService.getItems();
}

toggle(item: Item) {
    item.visible = !item.visible;
}

这篇关于用angular切换本机脚本中的listview内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！