角挠曲布局不适用于子组件

Question

我正在尝试创建一个弹性布局网格组件的垫卡的角度如下：

<div
  fxLayout.xs="column"
  fxLayout="row wrap"
  fxLayoutGap="10px"
  ngClass.gt-xs="ml-10"
>
  <app-card
    fxFlex.sm="0 1 calc(50%-10px)"
    fxFlex.md="0 1 calc(33%-10px)"
    fxFlex.gt-md="0 1 calc(25%-10px)"
    *ngFor="let cardModel of apodCards$ | async"
    [cardModel]="cardModel"
  >
  </app-card>
</div>

最后看起来是这样：

​

如果我使用我的应用程序卡组件的html模板，那么如下所示：

<div
  fxLayout.xs="column"
  fxLayout="row wrap"
  fxLayoutGap="10px"
  ngClass.gt-xs="ml-10"
>
  <mat-card
    fxFlex.sm="0 1 calc(50%-10px)"
    fxFlex.md="0 1 calc(33%-10px)"
    fxFlex.gt-md="0 1 calc(25%-10px)"
    *ngFor="let cardModel of apodCards$ | async"
    class="example-card"
  >
    <mat-card-header>
      <mat-card-title>{{ cardModel.title }}</mat-card-title>

      <mat-card-subtitle>{{ cardModel.subTitle }}</mat-card-subtitle>
    </mat-card-header>
    <img mat-card-image src="{{ cardModel.url }}" alt="Error Photo" />
    <ng-content></ng-content>

    <mat-card-content>
      <p [innerHTML]="cardModel.description"></p>
    </mat-card-content>

    <mat-card-actions>
      <app-share-button [url]="cardModel.shareUrl || ''"> </app-share-button>
    </mat-card-actions>
  </mat-card>
</div>

最后看起来是这样的：

​

如何使我的应用程序卡组件看起来像第二张图片？

我尝试过像这样重构应用程序卡组件：

<mat-card
  fxFlex.sm="0 1 calc(50%-10px)"
  fxFlex.md="0 1 calc(33%-10px)"
  fxFlex.gt-md="0 1 calc(25%-10px)"
  class="example-card"
>
  <mat-card-header>
    <mat-card-title>{{ cardModel.title }}</mat-card-title>

    <mat-card-subtitle>{{ cardModel.subTitle }}</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="{{ cardModel.url }}" alt="Error Photo" />
  <ng-content></ng-content>

  <mat-card-content>
    <p [innerHTML]="cardModel.description"></p>
  </mat-card-content>

  <mat-card-actions>
    <app-share-button [url]="cardModel.shareUrl || ''"> </app-share-button>
  </mat-card-actions>
</mat-card>

然后在网格组件中使用如下：

<div
  fxLayout.xs="column"
  fxLayout="row wrap"
  fxLayoutGap="10px"
  ngClass.gt-xs="ml-10"
>
  <app-card
    *ngFor="let cardModel of apodCards$ | async"
    [cardModel]="cardModel"
  >
  </app-card>
</div>

没有运气。

编辑：见Stackblitz

<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
  <!-- This doesn't work, maybe I need to apply flex to the custom CardComponent somehow? -->
  <app-card fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)"
    *ngFor="let card of cards;" [card]="card">
  </app-card>

  <!-- This works -->
  <!-- <mat-card *ngFor="let card of cards;" fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)"
    fxFlex.gt-md="0 1 calc(25%-10px)">
    <mat-card-title>{{card.name}}</mat-card-title>
    <img mat-card-image src="{{card.picture.uri}}" class="image">
    <mat-card-content>{{card.description}}</mat-card-content>
    <mat-card-actions>Container for buttons at the bottom of the card</mat-card-actions>
  </mat-card> -->

</div>

Answer 1

-这里有一个组件解决方案:将fxFlex添加到您的卡中

<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
  <app-card fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)"
    *ngFor="let card of cards;" [card]="card">
    <mat-card fxFlex>...</mat-card>
    <mat-card fxFlex>...</mat-card>
    <mat-card fxFlex>...</mat-card>...
  </app-card>
</div>

-这里有一个没有组件的解决方案:

<div fxLayout.xs="column" fxLayout="row wrap" fxLayoutGap="10px" ngClass.gt-xs="ml-10">
  <mat-card fxFlex.sm="0 1 calc(50%-10px)" fxFlex.md="0 1 calc(33%-10px)" fxFlex.gt-md="0 1 calc(25%-10px)">
    <mat-card-title>Card 1</mat-card-title>
    <img mat-card-image src="https://kakiseni.org/wp-content/uploads/2018/03/250X250.png" class="image">
    <mat-card-content>Primary card content. Intended for blocks of text</mat-card-content>
    <mat-card-actions>Container for buttons at the bottom of the card</mat-card-actions>
  </mat-card>

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

Stackblitz链接

​

​