[英]How do I implement Nativescript + Angular list view swipe actions to achieve an item delete?
我有一個RadListView Nativescript + Angular元素,我想通過滑動操作從其中刪除項目:
<RadListView [items]="stockList" id="listview" style="height: 100%; background-color: #f5f5f5;" swipeActions="true" pullToRefresh="true"
(pullToRefreshInitiated)="onPullToRefreshInitiated($event)"
(itemSwipeProgressEnded)="onSwipeCellFinished($event)"
(itemSwipeProgressStarted)="onSwipeCellStarted($event)"
(itemSwipeProgressChanged)="onCellSwiping($event)">
<ng-template let-item="item">
<GridLayout rows="*,*" colSpan="5" columns="*,2*,*,*" (tap)="onTap(item.name)">
<SVGImage col="0" row="0" rowSpan="2" class="pgrRating" [src]="pgrRating(item.PGR, item.raw_PGR)"></SVGImage>
<!-- TICKER -->
<Label row="0" col="1" horizontalAlignment="left" class="itemName" [text]="item.symbol"></Label>
<!-- COMPANY NAME -->
<Label row="1" col="1" horizontalAlignment="left" class="itemCompName" [text]="item.name"></Label>
<!-- LAST PRICE TODAY -->
<Label row="0" col="2" colSpan="2" horizontalAlignment="left" class="itemPrice"
[text]="'$' + (item.Last).toFixed(2)"
[ngClass]="item.Change == 0 ? 'black' : (item.Change > 0 ? 'green' : 'red')"></Label>
<Label style="color: #c00000" row="0" col="3" class="icon" text=""></Label>
<!-- $ CHANGE TODAY -->
<Label row="1" col="2" horizontalAlignment="left" class="itemChange"
[text]="item.Change.toFixed(2)"
[ngClass]="item.Change == 0 ? 'black' : (item.Change > 0 ? 'green' : 'red')"></Label>
<!-- % CHANGE TODAY -->
<Label row="1" col="3" horizontalAlignment="left" class="itemPriceChange"
[text]="item.Change > 0 ? ('(+' + item['Percentage '].toFixed(2) + '%)') : ('(' + item['Percentage '].toFixed(2) + '%)')"
[ngClass]="item.Change == 0 ? 'black' : (item.Change > 0 ? 'green' : 'red')"></Label>
</GridLayout>
</ng-template>
</RadListView>
問題是,我不確定將滑動模板放在哪里以保留“ let-item ngFor”行為以獲取該項目的索引。 文檔提到放置模板:
<GridLayout *tkListItemSwipeTemplate columns="auto, *, auto" class="gridLayoutLayout">
<StackLayout id="mark-view" col="0" class="icon" (tap)="onLeftSwipeClick($event)">
<Label text="mark" class="swipetemplateLabel" verticalAlignment="center" horizontalAlignment="center"></Label>
</StackLayout>
<StackLayout id="delete-view" col="2" class="" (tap)="onRightSwipeClick(item.index)">
<Label row="0" col="2" text="" class="icon swipeIcon" verticalAlignment="center" horizontalAlignment="center"></Label>
</StackLayout>
</GridLayout>
在<ng-template>
但是如果這樣做,我會在'item'循環中迷失方向,然后不知道如何傳遞索引。 如果我將滑動模板放置在ng-template內以保留項目索引,那么列表將在模板所在的位置顯示空白區域,因此我的列表無法占據視圖的整個高度。
有什么建議嗎? 非常感謝!!
您應該將SwipeTemplate放在ng-template之外的GridLayout中,以實現諸如delete et cetera之類的Swipe操作。 獲取索引所需的所有內容都通過args發送。 查看提供的示例,希望對您有所幫助。
// xml file
<GridLayout orientation="vertical" rows="auto, *" tkExampleTitle tkToggleNavButton>
<RadListView #myListView [items]="dataItems" row="1" selectionBehavior="None" (itemSwipeProgressEnded)="onSwipeCellFinished($event)"
(itemSwipeProgressStarted)="onSwipeCellStarted($event)" (itemSwipeProgressChanged)="onCellSwiping($event)" swipeActions="true">
<ng-template tkListItemTemplate let-item="item">
<StackLayout class="listItemStackLayout" orientation="vertical">
<Label class="labelName" [text]="item.name"></Label>
<Label class="labelTitle" [text]="item.title"></Label>
<Label class="labelText" [text]="item.text"></Label>
</StackLayout>
</ng-template>
<GridLayout *tkListItemSwipeTemplate columns="auto, *, auto" class="gridLayoutLayout">
<StackLayout id="mark-view" col="0" class="markViewStackLayout" (tap)="onLeftSwipeClick($event)">
<Label text="mark" class="swipetemplateLabel" verticalAlignment="center" horizontalAlignment="center"></Label>
</StackLayout>
<StackLayout id="delete-view" col="2" class="deleteViewStackLayout" (tap)="onRightSwipeClick($event)">
<Label text="delete" class="swipetemplateLabel" verticalAlignment="center" horizontalAlignment="center"></Label>
</StackLayout>
</GridLayout>
</RadListView>
</GridLayout>
// typescript file
public onLeftSwipeClick(args: ListViewEventData) {
console.log("Left swipe click");
this.listViewComponent.listView.notifySwipeToExecuteFinished();
}
public onRightSwipeClick(args) {
console.log("Right swipe click");
this.dataItems.splice(this.dataItems.indexOf(args.object.bindingContext), 1);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.