改变Angular中动态创建元素的可见性。

Question

我想在我的页面上显示2个旋转木马元素，顶部和底部。底部的旋转木马是通过for循环创建的，我只想让其中一个基于顶部旋转木马的当前活动幻灯片可见。

我的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个旋转木马，我希望一次只显示一个，当顶部的旋转木马改变幻灯片时，就会改变。

Answer 1

所以我想一个解决方案是使用 document.getElementById("Second0").style.visibility = 'visible' 这工作足够体面。它以前没有工作，但由于某种原因，现在它是。似乎只有当你知道你想改变的元素的ID是什么，这将工作。