Почему <mat-table> без источника данных не отображается в Angular 7 - PullRequest
Новая
       28

Почему <mat-table> без источника данных не отображается в Angular 7

0 голосов
/ 29 апреля 2019

Я хочу использовать <mat-table> для отображения названия опции и соответствующего ей значения (для изменения пользователем).Поскольку для параметров может потребоваться установить их значения различными способами (например, с помощью ползунка или выбора мата), я должен записать это без источника данных (или, по крайней мере, насколько я мог найти, нельзяиспользуйте заранее написанные html-теги в файле машинописного текста).

Поэтому мой MWE будет выглядеть так: 

<mat-table>
    <mat-header-row *matHeaderRowDef>
        <mat-header-cell>header</mat-header-cell>
    </mat-header-row>

    <mat-row>
        <mat-cell>
             cell
        </mat-cell>
    </mat-row>
</mat-table>

Однако, когда я смотрю на свою страницу, он просто отображает строку без каких-либо строк,Я хочу использовать эту таблицу в пределах <mat-card> (или, точнее, <mat-card-content>), но даже если я попробую ее вне этого, я просто получу строку и ничего больше.Вот как это выглядит на матовой карте:

Blank Line

Как правильно отобразить таблицу?

* Редактировать: * Так как он был запрошен, здесь также есть файл .ts. 

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

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.scss']
})
export class GeneralComponent implements OnInit {


  @ViewChild('resolutionSelect') resolutionSelect: MatSelect;

  resolutions: ResolutionOptionsInterface[] = [
    { value: '1920 x 1080' },
    { value: '800 x 600' }
  ];
  public selectedRes = this.resolutions[0];
  public isFullscreenEnabled = true;

  constructor() { }

  ngOnInit() {
    console.log("in oninit");
    this.resolutionSelect.value = this.resolutions[0].value;
  }

}

Это немного больше, чем минимальный рабочий пример, поэтому я объясню немного:

  • Один из моих вариантов - это разрешение, которое выбирается с помощью mat-select
  • . Это mat-select описано в html-файле, как указано ниже
  • Для этого mat-select будут заданы предопределенные значения, как определено в массиве resolutions

  • Еще один из моих вариантов - это просто выбор полноэкранного режима, что делает его mat-slide-toggle (однако,это еще не полностью реализовано)

    <mat-select #resolutionSelect fxFlex="200px"> <mat-option *ngFor="let res of resolutions" [value]="res.value" class="right"> {{res.value}} </mat-option> </mat-select>

1 Ответ

1 голос
/ 29 апреля 2019

Фактически, возможно создать таблицу материалов без источника данных. Вы должны убедиться, что вы сделали определения заголовков с отображаемыми столбцами и всеми.

Пример - HTML-файл: 

<table mat-table class="mat-elevation-z8">
  <ng-container matColumnDef="someValue">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>Some Value Header</th>
  </ng-container>

  <ng-container matColumnDef="someOtherValue">
    <th mat-header-cell *matHeaderCellDef mat-sort-header>
      Some Other Value Header
    </th>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>

внутри файла ts, вы должны определить свой массив 

displayedColumns: string[] = ['someValue', 'someOtherValue'];

Edit: Если ваше требование - это простая таблица с парой предопределенных значений, вы можете достичь этого, используя собственный элемент таблицы с классами css материала: 

<table class="mat-table" >
  <tr class="mat-header-row">
    <th class="mat-header-cell">A</th>
    <th class="mat-header-cell">B</th>
  </tr>
  <tr class="mat-row">
    <td class="mat-cell">A</td>
    <td class="mat-cell">B</td>
  </tr>
</table>
...