Typescript 棱角8材质，网格，带顶盖和瓷砖。未完全调整mat grid磁贴内容大小

棱角8材质，网格，带顶盖和瓷砖

我试图学习网格系统如何在角材料中工作。我动态地将组件拉入网格。现在，网格列表和平铺按预期工作。组件的渲染（自动完成等，也按预期工作）。但瓷砖的内容是关闭的。垫子图形部分。好像他们没有完全意识到自己在瓷砖里面

例如，如果页面收缩，网格分幅会响应并调整大小，但分幅中的内容看起来好像位于包含的页面上方。而且大小（字体宽度）不会缩小。我可能只需要CSS就可以解决这个问题，但我想了解为什么网格列表不起作用

我附上了一些截图。一个是具有小屏幕分辨率的网格，显示字体如何不收缩（这不是角度材质的一部分吗？），另一个是其allenter图像描述如何在控制台中呈现

从'@angular/core'导入{Component，OnInit}；
导出接口ITile{
颜色：字符串；
cols：数字；
标题文本：字符串；
行数：行数；
文本：字符串；
组件名称：字符串；
}
@组成部分({
选择器：“应用程序窗体”，
templateUrl:'forms.component.html'，
样式URL:['forms.component.scss']
})
导出类FormsComponent实现OnInit{
瓷砖：阵列；
setComponents（）{
this.tiles=新数组（）；
让组件=[]；
组件。推送（“自动完成”）；
components.push（'checkbox'）；
push（'datepicker'）；
组件。推送（'formfield'）；
组件。推送（“输入”）；
组件。按下（“无线按钮”）；
组件。推送（'select'）；
组件。推（“滑块”）；
组件。推（“滑动切换”）；
console.log（组件）；
组件。forEach（组件=>{
如果（组件=='autocomplete'）{
常量headerText='自动完成'；
这个.setTile（“#ccc”，4，headerText，'example'，1，component）；
}
如果（组件=='复选框'）{
常量headerText='复选框'；
这个.setTile（“#ccc”，4，headerText，'example'，1，component）；
}
如果（组件=='datepicker'）{
const headerText='日期选择器'；
这个.setTile（“#ccc”，4，headerText，'example'，1，component）；
}
如果（组件=='formfield'）{
const headerText='表单字段'；
这个.setTile（“#ccc”，4，headerText，'example'，1，component）；
}
如果（组件==‘输入’）{
常量headerText='Input'；
这个.setTile（“#ccc”，4，headerText，'example'，1，component）；
}
如果（组件=='radiobutton'）{
const headerText='单选按钮'；
这个.setTile（“#ccc”，4，headerText，'example'，1，component）；
}
如果（组件=='选择'）{
常量headerText='Select'；
这个.setTile（“#ccc”，4，headerText，'example'，1，component）；
}
如果（组件=='滑块'）{
常量headerText='滑块'；
这个.setTile（“#ccc”，4，headerText，'example'，1，component）；
}
如果（组件=='slidetoggle'）{
常量headerText='滑动切换'；
这个.setTile（“#ccc”，4，headerText，'example'，1，component）；
}
});
}
setTile（颜色：string，cols:number，headerText:string，text:string，行：number，组件名称：string）{
常数瓦片={
颜色
科尔斯，
标题文字，
文本，
排，
组件名称
};
这个。瓷砖。推（瓷砖）；
log（JSON.stringify（this.tiles））；
}
ngOnInit（）：void{
这个.setComponents（）；
}
}

{{tile.text}
{{tile.headerText}

我也有同样的问题。最后，我没有使用材质网格，而是使用角度弯曲网格。

然后可以使用此布置格线：

  <div class="parent flex-card-height" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="32px" fxFill>
    <mat-card fxFlex="50%" fxFill>
      <div class="mat-card-title heading"></div>
      <div class="left"
           *ngFor="let tile of tiles">
        {{tile.text}}
        <app-autocomplete *ngIf="tile.componentName === 'autocomplete'" class="spacing"></app-autocomplete>
      </div>
    </mat-card>

    <mat-card fxFlex="50%" fxFill>
      <div class="mat-card-title heading"></div>
      <div class="right"
           *ngFor="let tile of tiles">
        {{tile.text}}
        <app-checkbox *ngIf="tile.componentName === 'checkbox'" class="spacing"></app-checkbox>
      </div>
    </mat-card>
  </div>

{{tile.text}
{{tile.text}

我也有同样的问题。最后，我没有使用材质网格，而是使用角度弯曲网格。

然后可以使用此布置格线：

  <div class="parent flex-card-height" fxLayout="row" fxLayout.sm="column" fxLayout.xs="column" fxLayoutGap="32px" fxFill>
    <mat-card fxFlex="50%" fxFill>
      <div class="mat-card-title heading"></div>
      <div class="left"
           *ngFor="let tile of tiles">
        {{tile.text}}
        <app-autocomplete *ngIf="tile.componentName === 'autocomplete'" class="spacing"></app-autocomplete>
      </div>
    </mat-card>

    <mat-card fxFlex="50%" fxFill>
      <div class="mat-card-title heading"></div>
      <div class="right"
           *ngFor="let tile of tiles">
        {{tile.text}}
        <app-checkbox *ngIf="tile.componentName === 'checkbox'" class="spacing"></app-checkbox>
      </div>
    </mat-card>
  </div>

{{tile.text}
{{tile.text}

您知道，查看文档时，可能磁贴内的内容不可缩放，即使磁贴本身具有响应性。您知道，查看文档时，可能磁贴内的内容不可缩放，即使磁贴本身具有响应性。