Материал Angular8, Сетка с заголовками и плитками. содержимое mat-grid-tile не полностью изменяется

Question

Angular8 Материал, Сетка с заголовками и плитками.

Я пытаюсь узнать, как работает система сетки в Angular Материал. Я динамически вытягиваю компоненты в сетку. Прямо сейчас, список сетки и плитки работают как ожидалось. Рендеринг компонентов (Autocompelete et c, также работает как положено). Но содержимое плитки отключено. Часть циновки. Как будто они не совсем осознают, что находятся внутри плиток.

Например, если страница сжимается, плитки сетки реагируют и изменяют размер, но содержимое внутри плитки выглядит так, как будто оно находится над содержимым. Также размеры (ширина шрифта) не уменьшаются. Я мог бы, вероятно, исправить это с помощью CSS, но я хочу понять, почему не работает список сетки.

Я приложил несколько скриншотов. Один из них - это сетка с небольшим разрешением экрана, показывающая, как шрифты не сжимаются (не является ли это частью Angular Material?), А другой - как его описание изображения allenter здесь отображается в консоли.

import {Component, OnInit} from '@angular/core';

export interface ITile {
  color: string;
  cols: number;
  headerText: string;
  rows: number;
  text: string;
  componentName: string;
}

@Component({
  selector: 'app-forms',
  templateUrl: 'forms.component.html',
  styleUrls: ['forms.component.scss']
})
export class FormsComponent implements OnInit {
  tiles: Array<ITile>;

  setComponents() {
    this.tiles = new Array<ITile>();
    let components = [];
    components.push('autocomplete');
    components.push('checkbox');
    components.push('datepicker');
    components.push('formfield');
    components.push('input');
    components.push('radiobutton');
    components.push('select');
    components.push('slider');
    components.push('slidetoggle');
    console.log (components);

    components.forEach(component => {
      if (component === 'autocomplete') {
        const headerText = 'Auto Complete';
        this.setTile('#ccc', 4, headerText, 'example', 1, component);
      }
      if (component === 'checkbox') {
        const headerText = 'Checkbox';
        this.setTile('#ccc', 4, headerText, 'example', 1, component);
      }
      if (component === 'datepicker') {
        const headerText = 'Date Picker';
        this.setTile('#ccc', 4, headerText, 'example', 1, component);
      }
      if (component === 'formfield') {
        const headerText = 'Form Field';
        this.setTile('#ccc', 4, headerText, 'example', 1, component);
      }
      if (component === 'input') {
        const headerText = 'Input';
        this.setTile('#ccc', 4, headerText, 'example', 1, component);
      }
      if (component === 'radiobutton') {
        const headerText = 'Radio Button';
        this.setTile('#ccc', 4, headerText, 'example', 1, component);
      }
      if (component === 'select') {
        const headerText = 'Select';
        this.setTile('#ccc', 4, headerText, 'example', 1, component);
      }
      if (component === 'slider') {
        const headerText = 'Slider';
        this.setTile('#ccc', 4, headerText, 'example', 1, component);
      }
      if (component === 'slidetoggle') {
        const headerText = 'Slide Toggle';
        this.setTile('#ccc', 4, headerText, 'example', 1, component);
      }
    });
  }

  setTile(color: string, cols: number, headerText: string, text: string, rows: number, componentName: string) {
    const tile = {
      color,
      cols,
      headerText,
      text,
      rows,
      componentName
    };

    this.tiles.push(tile);
    console.log(JSON.stringify(this.tiles));
  }

  ngOnInit(): void {
this.setComponents();
  }
}

<mat-grid-list cols="4" rowHeight="1:1" gutterSize="55px">

  <mat-grid-tile class="grid-tile"
                 [colspan]="2"
                 [rowspan]="1"
                 *ngFor="let tile of tiles"
                 [colspan]="tile.cols"
                 [rowspan]="tile.rows"
                 [style.background]="tile.color">
    {{tile.text}}
    <app-checkbox *ngIf="tile.componentName === 'checkbox'"></app-checkbox>

    <app-autocomplete *ngIf="tile.componentName === 'autocomplete'"></app-autocomplete>
    <app-checkbox *ngIf="tile.componentName === 'checkbox'"></app-checkbox>

    <app-datepicker *ngIf="tile.componentName === 'datepicker'"></app-datepicker>
    <app-formfield *ngIf="tile.componentName === 'formfield'"></app-formfield>

    <app-input *ngIf="tile.componentName === 'input'"></app-input>
    <app-radiobutton *ngIf="tile.componentName ==='radiobutton'"></app-radiobutton>

    <app-select *ngIf="tile.componentName === 'select'"></app-select>
    <app-slider *ngIf="tile.componentName ==='slider'"></app-slider>

    <app-sidetoggle *ngIf="tile.componentName === 'slidetoggle'"></app-sidetoggle>
    <div style="width: 230px;"></div>

    <mat-grid-tile-header>
      <h3> {{tile.headerText}} </h3>
    </mat-grid-tile-header>
  </mat-grid-tile>
</mat-grid-list>

Answer 1

У меня была точно такая же проблема. В итоге я не использовал сетку материалов, а angular flex grid. https://tburleson-layouts-demos.firebaseapp.com/# / docs

Тогда вы можете использовать эту сетку макета:

  <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>