Angular mat卡中的多个图像

因此，我有一个

mat选项卡组

，它依次为每个选项卡显示一张

mat卡

。每张卡代表一个酒店房间

我想以某种方式在mat卡的图像部分显示一些图像，作为各种画廊。有没有办法做到这一点

以下是我当前的HTML模板：

{{room.name}
${room.price}por noche

{{room.details}}

书
分享

除了

img

之外，

mat-card-image

指令还可以应用于其他元素。它只用于将项目拉伸到全宽。因此，您可以创建一个提供“多媒体资料”体验的组件，并使用它来代替

img

：

<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>
  <my-image-gallery mat-card-image></my-image-gallery>
  <mat-card-content>
    <p>
      {{room.details}}
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-raised-button>Book</button>
    <button mat-button>Share</button>
  </mat-card-actions>
</mat-card>

{{room.name}
${room.price}por noche

{{room.details}}

书
分享

或者只需使用您的组件并自行调整大小—不必为指令操心