Mat-Tab-Group 在单击之前不会加载

Question

所以我的角度项目有问题。当应用程序首次加载时，选项卡不会显示。但是，一旦我单击该应用程序，选项卡就可以正常工作。

相关代码是这样的： 在 rooms.component.html 中：

<mat-tab-group color="accent" class="rooms">
<mat-tab *ngFor="let room of rooms"
[class.selected]=" room === selectedRoom"
(click)="onSelect(room)" label="{{room.name}}">
<mat-card class="example-card">
    <mat-card-header>
      <div mat-card-avatar class="example-header-image"></div>
      <mat-card-title>{{room.name}}</mat-card-title>
      <mat-card-subtitle>${{room.price}} por noche</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
    <mat-card-content>
      <p>
        Equipada con:
        -Cafetera
        -Minibar
        -Garrafa de agua
        -TV
        -Reloj Despertador
        -Baño
        -Secadora de pelo
        -Ducha de agua caliente
      </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button>Reservar</button>
      <button mat-button>Compartir</button>
    </mat-card-actions>
  </mat-card>
</mat-tab>
</mat-tab-group>

在 app.component.html 上：

<mat-toolbar color="primary">
  {{ title }}
</mat-toolbar>
<app-rooms></app-rooms>

Answer 1

尝试使用

<ng-template ngFor let-room [ngForOf]="rooms"><mat-tab></mat-tab></ng-template>

而不是

<mat-tab *ngFor="let room of rooms"></mat-tab>

。
如果有人遇到同样的问题，我希望这会有所帮助。
如果它现在可以工作，您可以尝试使用延迟加载：

<ng-template matTabContent>