以角度改变动态创建元素的可见性答案

【问题标题】：changing visibility of dynamically created elements in angular以角度改变动态创建元素的可见性
【发布时间】：2020-08-13 14:14:41
【问题描述】：

我想在我的页面上显示 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 个轮播，我一次只希望显示一个，当顶部轮播更改幻灯片时更改。

【问题讨论】：

标签： html angular bootstrap-4 carousel hidden-field

【解决方案1】：

所以我想一种解决方案是使用document.getElementById("Second0").style.visibility = 'visible' 这足够好用了。它以前不起作用，但由于某种原因它现在起作用了。似乎这只有在您知道要更改的元素的 id 是什么时才有效。

【讨论】：