angular - 为什么我的不响应数据角度

Question

我试图让我对它获得的动态数据值做出响应。我使用以下代码使其具有响应性

  <div fxLayout="row wrap " fxLayoutGap="50px grid" fxLayout.xs="column" fxLayoutAlign="space-around center" >
    <div class="grid-container">
      <!-- <div > -->
  
        <mat-card  fxFlex="calc(33%-25px)" fxFlex.sm="calc(50%-25px)" *ngFor="let hotel of hotels; let i = index;">
          <mat-card-title>{{ hotel.name }}</mat-card-title>
          <mat-card-subtitle>{{ hotel.address1 }}</mat-card-subtitle>

          <div *ngFor="let room of hotel.roomsList;">
          <mat-card-content >
          
            <!-- <p>Room Details</p> -->
            
            <p style="color: darkcyan;">{{room.type_name}}</p> 
            <p style="color: darkcyan;">{{room.price}}</p> 
          </mat-card-content>
        </div>
        </mat-card>
      <!-- </div> -->
    </div>
  </div>

我得到的输出是：

它对我传递的数据没有反应。我应该如何修改

Answer 1

在 mat 卡中，您使用 fxFlex calc 定义高度，如果内容区域大于高度，那么内容就会溢出。

fxFlex="计算(33%-25px)" fxFlex.sm="计算(50%-25px)"

使垫卡响应的问题的答案是在垫卡上使用容器 div

像这样

<div> 
<mat-card>...</mat-card>
</div>

在该 div 标签中添加名为 fxLayoutAlign="start start" 的 flex 布局 api

<div fxLayout="row" fxLayoutAlign="start start"> 
<mat-card>...</mat-card>
</div>

这就是所有垫卡都会响应的

这是一个 stackblitz 示例https://stackblitz.com/edit/angular-material2-issue-a2wx8c

一切顺利！