изменение видимости динамически создаваемых элементов в angular - PullRequest
Новая
       57

изменение видимости динамически создаваемых элементов в angular

0 голосов
/ 29 апреля 2020

Я хочу отобразить 2 элемента карусели на моей странице, вверху и внизу. нижние карусели создаются через a для l oop, и я хочу, чтобы только одна из них была видимой на основе текущего активного слайда верхней карусели

my html

<div>
<ngb-carousel class="outter" id="Main"   (slide)="onSlide($event)">
    <ng-template ngbSlide id="{{i}}" *ngFor='let M of main; index as i'>
        <div class="picsum-img-wrapper">
            <img src="https://picsum.photos/id/{{M}}/900/500" >
        </div>
    </ng-template>
</ngb-carousel>

<div #secondary *ngFor='let s of second; index as j'>
    <ngb-carousel *ngIf="show" class="inner" id="Second{{j}}" >
        <ng-template ngbSlide  *ngFor='let image of s.image; index as k'>
        <div class="picsum-img-wrapper">
            <img src="https://picsum.photos/id/{{image}}/900/500" >
            </div>
        </ng-template>
    </ngb-carousel>
</div>

соответствующий файл ts 

import { Component, OnInit, ViewChild, ElementRef,  } from '@angular/core';

@Component({
  selector: 'app-carousels',
  templateUrl: './carousels.component.html',
  styleUrls: ['./carousels.component.css']
})
export class CarouselsComponent implements OnInit {

  @ViewChild('secondary', {static: true}) SecRef: ElementRef

  public activeSlide: number
  public show

  public main = [944, 1011, 984, 777]

  public second = [
    {image: [0, 1, 2], name: 'a'},
    {image: [10, 11, 12], name: 'b'},
    {image: [20, 21, 22], name: 'c'},
    {image: [30, 31, 32], name: 'd'},
  ]


  public onSlide(slideData) {
    this.activeSlide = slideData.current
    if (this.activeSlide == 1)
    {
      this.show = true
    }
    else
      this.show = false
    console.log(this.activeSlide)
  }


  constructor() { }

  ngOnInit() {
  }

  ngAfterViewInit() {
    console.log(this.SecRef.nativeElement)
  }

}

Таким образом, внизу есть 4 карусели, и я хочу, чтобы только один показ за раз менялся, когда верхняя карусель меняет слайды.

1 Ответ

0 голосов
/ 29 апреля 2020

так что я думаю, что одно решение использует document.getElementById("Second0").style.visibility = 'visible', это работает достаточно прилично. раньше это не работало, но почему-то сейчас. Похоже, это сработает, только если вы знаете, какие идентификаторы элементов вы хотите изменить.

...