web-dev-qa-db-ja.com

Angular 7にデータソースなしで<mat-table>が表示されているのはなぜですか

<mat-table>を使用してオプションの名前を表示し、それは（ユーザーが変更するために）対応する指定値です。オプションは異なる手段（スライドトグルやマット選択など）によって設定された値を設定する必要があるかもしれません。 TypeScriptファイルにPREWRETTED 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;
  }

}

これは最小の実施例より少し多いので、ちょっと説明します。

  • 私のオプションの1つは解決策です。これはmat-selectによって選択可能です
  • このmat-selectは以下のようにHTMLファイルで定義されています。
  • このmat-selectは、resolutions配列で定義されているように、事前定義値を与えられます。

  • 私のオプションのもう1つは単にフルスクリーンの選択で、それは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>

angularangular-materialmat-table
5
Tare

実際、データソースなしで素材テーブルを作成することは可能です。表示されている列とすべてのヘッダー定義を確認する必要があります。

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

編集:あなたの要件がいくつかの事前定義された値を持つ単純なテーブルの単なるテーブルの場合は、マテリアル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>
 _
4
talhature