Question

我想动态显示matCard使用3列3行的for循环，总共9个使用角形材料的matcard。如何在matGrid列表中执行该操作。如何在网格和Matcards中动态地将其双击。任何人都可以帮忙吗

<mat-grid-list cols="3" rowHeight="1:0.7" >  <mat-grid-tile *ngFor ="let tile of Tiles">
    <mat-card class="card">
      <mat-card-header>
        <mat-icon class="front">home</mat-icon>
        <br />
        <mat-card-title>Pop</mat-card-title>
        <mat-icon class="corner">more_vert</mat-icon>
      </mat-card-header>
      <mat-divider></mat-divider>
      <mat-card-content class="content">
        <span class="num">7896</span>
        <br />
        Actual
        <br />
      </mat-card-content>

      <mat-divider></mat-divider>

      <mat-card-footer>
        <span>data:</span>
        <span style="padding-left: 40;"> 550,000</span>
        <br />
        <span> Accuracy: -6.5</span>
      </mat-card-footer>
    </mat-card>
  </mat-grid-tile>

</mat-grid-list>

Answer 1

我正在创建一个CardList对象，该对象将在mat-grid-tile中进行迭代。您可以根据需要修改cardList对象。

将此对象添加到您的.ts中：

(100,100,1)

现在以html进行迭代：

cardList = [
             {'cardTitle',: 'Card1 Title', 'cardSubTitle': 'CardSub', 'cardContent': 'Content for card 1', 'footer': 'footer for card 1'},
             {'cardTitle',: 'Card2 Title', 'cardSubTitle': 'Card2 sub title', 'cardContent': 'Card2 content ', 'footer': 'Card2 footer'},
             {'cardTitle',: 'Card3 Title', 'cardSubTitle': 'Card3 sub title', 'cardContent': 'Card3 content', 'footer': 'card3 footer'}

]

角形材质Matcard动态内部材质网格

1 个答案: