Как скрыть элемент строки в списке с помощью angular2 nativescript

Мне нужно удалить/скрыть элемент из списка, если выполняется условие: имена getData и getCategory равны. Я проверил в журнале консоли, для первых трех пунктов два вышеуказанных условия равны.

Поэтому, исходя из этого, мне нужно скрыть элемент. Я попробовал код ниже. У меня это не сработало.

Отредактировано:

html:

<GridLayout >
    <ListView (setupItemView)="onSetupItemView($event)" [items]="allFeedItems" class="list-group">
        <ng-template let-item="item" let-visible="visible">
            <StackLayout [visibility]="visible ? 'visible' : 'collapsed'" class="card-view" margin="10">

            <StackLayout>

                <StackLayout orientation="horizontal">
                    <Image src={{item.iconName}} stretch="none" class="item-icon"></Image>
                    <Label class="item-category" [text]="item.category"></Label>
                </StackLayout>
                <StackLayout orientation="horizontal">
                    <Label class="item-time" text="4 hours ago"></Label>
                </StackLayout>
                <StackLayout orientation="vertical">
                    <Image src={{item.imageUrl}} stretch="aspectFill" width="100%" height="50%" class="item-image"></Image>
                    <Label class="item-title" [text]="item.title" textWrap="true"></Label>
                </StackLayout>

            </StackLayout>

            </StackLayout>
        </ng-template>
    </ListView>     


    <Image src="res://pref_circle" (setupItemView)="showModal($event)" verticalAlignment="bottom" horizontalAlignment="right" minWidth="45"  height ="45" ></Image>

I'm using modal custom dialog screen.When coming back from modal dialog, its triggering below code:

файл ts:

    public showModal(args: SetupItemViewArgs) {
    let options = {
        context: {},
        fullscreen: true,
        viewContainerRef: this.vcRef
    };

    this.modal.showModal(ModalComponent, options).then(res => {
        console.log("Res:", res);

        console.log("PrintCategory2", StatusBar.categoryArr);

        let i = args.index;
        let barCategory = StatusBar.categoryArr[i];
        let dataCategory = this.allFeedItems[i].category;

        if (barCategory === dataCategory) {
            args.view.context.visible = false;
        } else {
            args.view.context.visible = true;
        }


    });

при нажатии на изображение я запускаю диалоговое окно showmodel. При получении ответа из модального диалога он вызовет эту строку: this.modal.showModal(ModalComponent, options).then(res =>.

Моя проблема: при нажатии на модальное диалоговое окно не запускается. Поскольку я добавил SetUpItemViewArgs в этот метод: public showModal(args: SetupItemViewArgs)


nativescript typescript angular angular2-nativescript nativescript-angular
person Steve    schedule 25.07.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Решение 1. Использование Observable

Это решение заключается в использовании BehaviorSubject (тип наблюдаемого) и канала async, а также путем удаления элемента строки, который вы хотите скрыть в массиве. Весь список будет обновляться каждый раз, когда вы меняете значение в теме.

import {BehaviorSubject} from "rxjs/BehaviorSubject";

...

public items$: BehaviorSubject<Array<any>> = new BehaviorSubject([]);
constructor() {
    //may be it's not in constructor but after you got allFeedItems
    this.items$.next(this.allFeedItems);
}
public hideSomeRow() {
    for (let i = 0; i < this.allFeedItems.length; i++) {
        let barCategory = StatusBar.categoryArr[i];
        let dataCategory = this.allFeedItems[i].category;

        if (barCategory === dataCategory) {
            // remove the item from array 
            this.allFeedItems.splice(i, 1);
        }
    }
    //update to the new value
    this.items$.next([...this.allFeedItems]);
}

Ваше мнение:

<ListView [items]="items$ | async" class="list-group">
    <ng-template let-item="item" let-index="index">
        <StackLayout class="card-view" margin="10">

        <StackLayout>

            <StackLayout orientation="horizontal">
                <Image src={{item.iconName}} stretch="none" class="item-icon"></Image>
                <Label class="item-category" [text]="item.category"></Label>
            </StackLayout>

            <StackLayout orientation="horizontal">
                <Label class="item-time" text="4 hours ago"></Label>
            </StackLayout>

            <StackLayout orientation="vertical">
                <Image src={{item.imageUrl}} stretch="aspectFill" width="100%" height="50%" class="item-image"></Image>
                <Label class="item-title" [text]="item.title" textWrap="true"></Label>

            </StackLayout>

        </StackLayout>

        </StackLayout>
    </ng-template>
</ListView>    
<Image (tap)="hideSomeRow()" ... class="item-image"></Image>

Решение 2. Простая логика Js/ts

(скрыть строку/удалить элемент после действия)

Вам нужно сохранить в переменной массива оператор элемента, если он должен быть скрытым или видимым.

public isVisible: Array<boolean> = [];
public hideSomeRow() {
    for (let i = 0; i < this.allFeedItems.length; i++) {
        let barCategory = StatusBar.categoryArr[i];
        let dataCategory = this.allFeedItems[i].category;

        if (barCategory === dataCategory) {
            // remove the item from array 
            this.allFeedItems.splice(i, 1);
        }
    }
    this._changeDetectorRef.markForCheck();
}

Теперь в вашем html ничего не изменить:

<ListView [items]="allFeedItems" class="list-group">
    <ng-template let-item="item" let-index="index">
        <StackLayout class="card-view" margin="10">

        <StackLayout>

            <StackLayout orientation="horizontal">
                <Image src={{item.iconName}} stretch="none" class="item-icon"></Image>
                <Label class="item-category" [text]="item.category"></Label>
            </StackLayout>

            <StackLayout orientation="horizontal">
                <Label class="item-time" text="4 hours ago"></Label>
            </StackLayout>

            <StackLayout orientation="vertical">
                <Image src={{item.imageUrl}} stretch="aspectFill" width="100%" height="50%" class="item-image"></Image>
                <Label class="item-title" [text]="item.title" textWrap="true"></Label>

            </StackLayout>

        </StackLayout>

        </StackLayout>
    </ng-template>
</ListView>    
<Image (tap)="hideSomeRow()" ... class="item-image"></Image>

Примечание: вы можете использовать ChangeDetectorRef для обновления представления

person Fetrarij    schedule 25.07.2017
comment
пожалуйста, проверьте мой отредактированный пост. Моя проблема заключается в том, что при нажатии на изображение не запускалось модальное диалоговое окно. - person Steve; 26.07.2017
comment
Почему вы изменили вопрос :-/ ? Почему вы добавляете setupItemView в изображение, почему бы и нет (нажмите)? Даже если вы используете какой-то код из моего ответа, теперь я потерял вашу потребность, потому что вы хотели скрыть только некоторые строки :( - person Fetrarij; 26.07.2017
comment
очень жаль. Я реализовал все ваши ответы в отредактированном посте. При нажатии на изображение мне нужно только скрыть и показать элемент списка. - person Steve; 26.07.2017
comment
При нажатии на изображение => (нажмите) = showModal(), а не setupItemView - person Fetrarij; 26.07.2017
comment
Это не сработает, вы хотите что-то: нажмите на модальное => скрыть какой-то элемент? в этом случае вам не нужен setupItemView в списке, решение состоит в том, чтобы установить массив, например isVisible: Array<boolean> = [];, и установить по индексу в этой переменной, должен ли элемент быть видимым или нет. Вы получите: isVisible = [true, true,..., false] затем используйте его в представлении - person Fetrarij; 26.07.2017
comment
@Stephen Я обновил решение, попробуйте решение 2, потому что решение 1 не будет работать с вашими потребностями (после вызова модального окна) - person Fetrarij; 26.07.2017
comment
Я попробовал ваше второе решение. Оно отлично работает для 1-го и 2-го элемента строки списка. Но когда я прокручивал вниз, 3-й и 4-й элементы списка не работали нормально. Я думаю, что при переработке списка скрытие и отображение не работает для 3-го, 4-го и т.д.элементов списка. - person Steve; 26.07.2017
comment
@Stephen, я добавил 3-е решение, переименовал его в решение 1, потому что, на мой взгляд, оно лучшее. - person Fetrarij; 30.07.2017
comment
И я удалил настройку списка (setupItemView) из решения, так как это только во время создания списка. - person Fetrarij; 30.07.2017
comment
Как я вижу, ваше решение отлично работает с элементами скрытия и отображения списка. Я использовал это решение (решение 2: простая логика Js/ts). - person Steve; 30.07.2017
comment
И тебе спасибо - person Fetrarij; 30.07.2017