переключить только один div из ng-контейнера с помощью * ngFor - PullRequest
Новая
       11

переключить только один div из ng-контейнера с помощью * ngFor

0 голосов
/ 31 августа 2018

Я бы хотел переключить только один делитель из нескольких дел, нажав одну из кнопок

HTML код 

<ng-container *ngFor = "let m of images">
<button (click) = "toggle(m[m.length-1])"><img src = {{m[0]}}/></button>
   <div id = "toggle" *ngIf = "chosen" [@toggle] = 'status'>
    <ul>
    <li *ngFor = "let z of clicked | slice: 0 : 10;"><img src = {{z}}/></li>
    </ul>
   </div>
   <br />
</ng-container>

В * ngFor = "пусть m изображений, m - это массив <<code>string[]>, и в индексе 0 изображение сохраняется, а в индексе 1 хранится уникальный идентификатор. Поэтому я получаю этот идентификатор для функции toggle (). В переключение есть еще один Array <<code>string[]>, memberimages, который имеет 10 изображений с индексом от 0 до 9 и имеет unqiue id в последнем индексе. Так что сравните id с id в this.memberimages и, если он совпадает, то выберите selected как true и сохраните соответствующую строку [] из this.memberimages в this.clicked, и это используется в теге li .... надеюсь, объяснение понятно ....: (

toggle(id: string){
        this.status = this.status === 'open' ? 'close' : 'open';
        if(this.status != 'close')
        {
            this.memberimages.forEach((item, index) =>{
                if(item[item.length-1] == id){
                    this.clicked = item;
                    this.chosen = true;
                    index = this.memberimages.length;
                }   
            });
        }
        else
        {
            this.chosen = false;
        }       
}

Анимация 

  animations:[
    trigger('toggle', [
        state('open', style({
            'opacity' : '1',
            'display' : 'block' 
        })),
        state('close', style({
            'opacity' : '0',
            'display' : 'none'
        })),
        transition('open => close', animate('1000ms ease-in-out', style({
            'opacity':'0',
            'display' : 'none'
        }))),
        transition('close => open', animate('1000ms ease-in-out', style({
            'opacity':'1',
            'display' : 'block'
        })))
    ])
]

CSS для div id = "toggle" просто отображается: нет;

То, что я ожидал, было, если я нажму одну из кнопок (всего 5), значения должны переключаться только под этой кнопкой. Однако на самом деле происходит следующее: после нажатия одной из кнопок значения становятся правильными, но каждая кнопка переключала div с одинаковыми значениями одновременно, и я не вижу эффекта анимации. Как мне сопоставить один div с одной кнопкой, чтобы каждая кнопка имела правильные значения и только переключала div?

PS: Извиняюсь за мой плохой английский ..: (

1 Ответ

0 голосов
/ 01 сентября 2018

Попробуйте это

Создать новую переменную 

Toggle =[]

Тогда Используйте индекс для отслеживания элемента 

<ng-container *ngFor = "let m of images; let i=index ">
<button (click) = "toggle(m[m.length-1]);Toggle[i] =! Toggles[i] "><img src = {{m[0]}}/></button>
   <div id = "toggle" *ngIf = "Toggle[i]" [@toggle] = 'status'>
    <ul>
    <li *ngFor = "let z of clicked | slice: 0 : 10;"><img src = {{z}}/></li>
    </ul>
   </div>
   <br />
</ng-container>
...