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();
    }

}

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.

回答1:

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

Add visible property to item.ts

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

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 },

Your list template should be

 <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>

And finally the toggle method will be,

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

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

来源：https://stackoverflow.com/questions/42665484/toggle-listview-content-in-nativescript-with-angular

标签

android

listview

angular

nativescript