Question

我正在尝试在angular 7中实现多项目滑块。当我在html中使用静态数据时，效果很好，但是当我尝试使用ngFor从角度动态地实现相同功能时，则在第一页中它没有显示任何内容，但是当我滑到下一张幻灯片时，它工作正常。

这是html中带有静态数据的代码

HTML：-

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" 
  appear-active-class="custom-appear-active-class">
  ...
</transition>

这是我用于动态显示的代码

<div class=" container-fluid news-slider">
      <div class="row mySlides fad">
            <div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
                <mat-card class="insidecard newscard">
                    <img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
                    <mat-card-content>
                        <div class="newsdetails">
                          The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
                          A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
                          bred for hunting.
                        </div>
                      </mat-card-content>
                </mat-card>
              </div>
              <div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
                  <mat-card class="insidecard newscard">
                      <img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
                      <mat-card-content>
                          <div class="newsdetails">
                            The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
                            A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
                            bred for hunting.
                          </div>
                        </mat-card-content>
                  </mat-card>
                </div>
                <div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
                    <mat-card class="insidecard newscard">
                        <img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
                        <mat-card-content>
                            <div class="newsdetails">
                              The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
                              A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
                              bred for hunting.
                            </div>
                          </mat-card-content>
                    </mat-card>
                  </div>
                  <div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
                      <mat-card class="insidecard newscard">
                          <img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
                          <mat-card-content>
                              <div class="newsdetails">
                                The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
                                A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
                                bred for hunting.
                              </div>
                            </mat-card-content>
                      </mat-card>
                    </div>
                    <div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
                        <mat-card class="insidecard newscard">
                            <img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
                            <mat-card-content>
                                <div class="newsdetails">
                                  The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
                                  A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
                                  bred for hunting.
                                </div>
                              </mat-card-content>
                        </mat-card>
                      </div>
                      <div class=" col-xl-2 col-lg-2 col-md-2 col-sm-2 newsitem">
                          <mat-card class="insidecard newscard">
                              <img mat-card-image src="../../assets/img/download.jpg" class="newsimage">
                              <mat-card-content>
                                  <div class="newsdetails">
                                    The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
                                    A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
                                    bred for hunting.
                                  </div>
                                </mat-card-content>
                          </mat-card>
                        </div>


          </div>
        <a class="pre" (click)="plusSlides(-1)">&#10094;</a>
        <a class="nex" (click)="plusSlides(1)">&#10095;</a>
  </div>


CSS:-


.news-slider{
    position: relative;
}
.mySlides{
    display: none;
}
.pre,.nex{
    cursor: pointer;
    position: absolute;
    top:50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color:red;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease; 
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color:white;
    box-shadow: 1px 2px 10px -1px rgba(0,0,0,.3);
}
.nex {
    right: 0;
    border-radius: 3px 0 0 3px;
    margin-right: 0px;
  } 
  .pre{
    margin-left:-15px;
  }
   .fad {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }



Angular:-


export class MainpageComponent implements OnInit {
  slideIndex = 1;

  parent = document.getElementsByClassName("mySlides");

   constructor(config : NgbCarouselConfig,public httpclient:HttpClient,private renderer:Renderer2) {
    config.interval = 2000;
    config.wrap = true;
    config.keyboard = false;
    config.pauseOnHover = true;
   }

  ngOnInit() {
    this.showSlides(this.slideIndex);
  }

 showSlides(n)
  {
      var i;
      if(n>this.parent.length)
      {
        this.slideIndex = 1;
      }
      if(n<1)
      {
        this.slideIndex = this.parent.length;
      }
      for(i=0;i<this.parent.length;i++)
      {
        this.renderer.setStyle(this.parent[i],'display','none');
      }
      this.renderer.setStyle(this.parent[this.slideIndex-1],'display','flex');
      console.log(this.parent[0]);
  }
  plusSlides(n)
  {
    this.showSlides(this.slideIndex += n);
  }

}

行为：

Answer 1

您正在进行2件事：

在newschuck中获取数据
显示幻灯片

问题＃1 ：您在ngOnInit中完成了这两项任务-在OnInit中获取数据（第1点）很好，但由于ngOnInit是，因此无法显示幻灯片（第2点）在呈现页面之前运行。

问题＃2 ：如果您将这两个问题（第1点和第2点）都放入了ngAfterViewInit中，则会收到错误消息，“表达式在检查后已更改...”

解决方案：在OnInit中获取数据（第1点）；呈现页面后显示幻灯片（第2点）。为此，我创建了一个布尔变量（以防万一您从rest api获取数据会有所帮助）。

检查complete demo from your githib here

编辑（1）-要针对其余API进行此操作，请将ngAfterViewInit内的代码传输到finally块() => { }中，如下所示：

  getTopNews() { this.httpclient.get<{ message: any, errorMessage: string }>("localhost:3000/trendingNews").subscribe(
    responsedata => { this.newsdata = responsedata.message; 
    this.newschunk = this.getChunks(this.newsdata, 3);
    this.arrayUpdated = true;
    }
    ,error => { console.log(error); this.renderer.setStyle(this.newsdiv[0], 'display', 'none'); });
    /* this is the finally block */
    () =>{     if (this.arrayUpdated) {      this.showSlides(this.slideIndex);     }}
    }

如何在角度实现多项目滑块？

1 个答案: