mat-grid-list не отображает должным образом

Question

Я только начал использовать Angular Material с Angular v6. Когда я пытаюсь отобразить значение открытого поля в моем компоненте, оно не отображается на моей веб-странице. Однако, если я проверю, что элемент существует с помощью Chrome DevTools, я вижу, что значение было сгенерировано, но веб-страница не отображает его.

<mat-card>
  <mat-card-title>Basic grid list {{getLabel(22, 'Members')}}</mat-card-title>     <!-- This shows properly -->
  <mat-card-content class="demo-basic-list">
    <mat-grid-list cols="4" [rowHeight]="123">
      <mat-grid-tile> {{getLabel(22, 'Members')}} </mat-grid-tile>             <!-- This does NOT show properly -->
      <mat-grid-tile> Two </mat-grid-tile>
      <mat-grid-tile> Three </mat-grid-tile>
      <mat-grid-tile> Four </mat-grid-tile>
    </mat-grid-list>
  </mat-card-content>

`

Answer 1

Я также столкнулся с теми же проблемами, при которых сетка просто не появлялась бы или была бы действительно маленькой на экране.

Если вы внимательно посмотрите на документацию, то сетка для изображений фактически создана в соответствии со спецификацией дизайна материала: https://material.io/design/components/image-lists.html.

И если вы осмотрите элементы сетки, вы увидите, что она создает теги фигур. Я не совсем уверен, действительно ли это используется, и теги рисунков влияют на что-либо, но я предлагаю вам использовать что-то еще, такое как Angular Flex Layout и выбрать вместо этого flexbox или CSS grid.

Answer 2

Я только что проверил это (заменил методы статическими значениями), и он работал нормально для меня.

Не могли бы вы попробовать следующее?

1. Удалите методы getLabel?Или покажите мне это здесь?
2. Удалите CSS и попробуйте.
3. Вставьте связанные с HTML и TS файлы, чтобы я мог их просмотреть.
4. Вставьте ваш AppModule, чтобы убедиться, чтоимпорт выполнен правильно.
5. Вставьте файл styles.scss, чтобы убедиться, что тема @ angular / material правильно импортирована.

Один из них должен помочь найти путь к успеху.