Как реализовать действия смахивания Nativescript + Angular, чтобы добиться удаления элемента?

Question

У меня есть элемент 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="&#xf071;"></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="&#xf1f8;" class="icon swipeIcon" verticalAlignment="center" horizontalAlignment="center"></Label>
  </StackLayout>
</GridLayout>

в <ng-template>, но если я это сделаю, я проиграю в цикле 'item', а затем не знаю, как передать индекс.Если я поместу шаблон свайпа внутри ng-шаблона, чтобы сохранить индекс элемента, то в списке отобразится пустая область, в которой будет находиться шаблон, поэтому мой список не сможет занимать всю высоту представления.

Любой совет?Спасибо!!

Answer 1

Вы должны поместить SwipeTemplate в GridLayout за пределами ng-шаблона, чтобы выполнить действия Swipe, такие как delete и так далее.Все, что вам нужно для получения индекса, отправляется через аргументы.Посмотрите на приведенный пример, надеюсь, это поможет.

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