为什么没有数据源的<mat-table>在Angular中不显示 7

Question

我想使用 <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>）中使用这个 table，但即使我在那个之外尝试它，我也只是得到了线，没有别的。这是垫卡内的样子：

如何才能正确显示 table？

*编辑：* 既然有人要，这里也有.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>

Answer 1

事实上，可以在没有数据源的情况下创建 material table。您需要确保使用显示的列和所有内容进行了 header 定义。

示例 - 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'];

编辑： 如果您的要求只是一个简单的 table 和几个预定义值，您可以通过使用带有 material css 类的原生 table 元素来实现它：

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

为什么没有数据源的<mat-table>在Angular中不显示 7

Why is the <mat-table> without a Datasource not displayed in Angular 7

angular-material

angular

mat-table