所以我的角度项目有问题。当应用程序首次加载时,选项卡不会显示。但是,一旦我单击该应用程序,选项卡就可以正常工作。
相关代码是这样的: 在 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>
尝试使用
<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>