转盘在Angular 6中的mat-tab内不起作用

Question

我正在尝试在mat-tab中设置轮播，在我的应用程序中，我有3个标签（mat-tab-group）。我想在所有选项卡中设置一个轮播。

但是在我的情况下，轮播在第一个选项卡中起作用，只有第二个和第三个选项卡的轮播不起作用（（在特定时间后不会自动切换图像）。

app.component.html

 <div class="container" style="padding-top: 50px">
          <mat-tab-group>
            <mat-tab label="Mobile">
              <div style="padding-top: 25px" class="carousel slide carousel-fade" data-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img class="d-block w-100 ProductImg" src="{{activeMobileProduct.img}}" alt="{{activeMobileProduct.alt}}">
                  </div>
                  <div class="carousel-item" *ngFor="let mobile of mobileProducts">
                    <img class="d-block w-100 ProductImg" src="{{mobile.img}}" alt="{{mobile.alt}}">
                  </div>
                </div>
              </div>
            </mat-tab> //This part is working

            <mat-tab label="Web">
              <div style="padding-top: 25px" class="carousel slide carousel-fade" data-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img class="d-block w-100 ProductImg" src="{{activeWebProduct.img}}" alt="{{activeWebProduct.alt}}">
                  </div>
                  <div class="carousel-item" *ngFor="let web of webProducts">
                    <img class="d-block w-100 ProductImg" src="{{web.img}}" alt="{{web.alt}}">
                  </div>
                </div>
              </div>
            </mat-tab> //It's not working as I mentioned above.

            <mat-tab label="Windows">

            </mat-tab>
            <mat-tab label="Clients"> Clients </mat-tab>
          </mat-tab-group>
        </div>

stackblitz：https://stackblitz.com/edit/angular-mat-tab-active-3haqea?file=app/tabs-template-label-example.html

任何人都可以给我解决该问题的方法。