<table mat-table> 数据源没有显示，即使我从 Material Angular 完全复制它

Question

我知道我的问题很奇怪，但我的问题正是标题所说的。我的 mat-table dataSource 没有显示任何数据，即使我已经尝试使用 console.log("My Data : ", this.dataSaource)。不仅如此，我的控制台很干净，没有任何错误。

这是我第一次使用material.angular.io and I exactly follow the steps but it still failed. Last time I tried to just fully copy it exactly from the example in Here，数据仍然没有显示出来。我检查了我的 app.module 并且我已经声明了它。我正在使用 Angular 7

这是我的 ts:

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

export interface PeriodicElement {
  name: string;
  position: number;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

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

  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;

  daftarGuru: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    console.log("cek data : ", this.dataSource) 
    this.daftarGuru = this.formBuilder.group(
      {
        name : [""],
        email : [""],
        phone : [""],
        nip : [""],
        school : [""],
      }
    );
  }

  ngOnInit() {
  }

  postGuru(){
    console.log("Daftar Guru")
  }

}

这是我的 html:


<section id="peserta">
  <div class="container">
    <div class="card-grid">

      <mat-card>
        <mat-tab-group>
          <!-- List Guru dan Murid Start -->
          <mat-tab label="List Murid & Guru"> 
            <!-- Card Start -->
            <mat-card>
              <mat-card-title class="title">
                Daftar Peserta
              </mat-card-title>

              <br>

              <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

                <!--- Note that these columns can be defined in any order.
                      The actual rendered columns are set as a property on the row definition" -->

                <!-- Position Column -->
                <ng-container matColumnDef="position">
                  <th mat-header-cell *matHeaderCellDef> No. </th>
                  <td mat-cell *matCellDef="let element"> {{element.position}} </td>
                </ng-container>

                <!-- Name Column -->
                <ng-container matColumnDef="name">
                  <th mat-header-cell *matHeaderCellDef> Name </th>
                  <td mat-cell *matCellDef="let element"> {{element.name}} </td>
                </ng-container>

                <!-- Weight Column -->
                <ng-container matColumnDef="weight">
                  <th mat-header-cell *matHeaderCellDef> Weight </th>
                  <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
                </ng-container>

                <!-- Symbol Column -->
                <ng-container matColumnDef="symbol">
                  <th mat-header-cell *matHeaderCellDef> Symbol </th>
                  <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
                </ng-container>

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

            </mat-card>    
            <!-- Card End -->
          </mat-tab>
          <!-- Daftar Guru dan Murid End -->

          <!-- Daftar Siswa Start -->
          <mat-tab label="Tambahkan Peserta"> 
            <!-- Card Start -->
            <mat-card>
              <mat-card-title class="title">
                Tambahkan Peserta
              </mat-card-title>

              <form [formGroup]="daftarMurid" (ngSubmit)="postMurid()">
                <div class="form-container">
                  <mat-form-field>
                    <input class="input-form" formControlName="name" matInput placeholder="Nama">
                  </mat-form-field>              
                  <mat-form-field>
                    <input class="input-form" formControlName="email" matInput placeholder="Email">
                  </mat-form-field>              
                  <mat-form-field>
                    <input class="input-form" formControlName="phone" matInput placeholder="Nomor Telepon">
                  </mat-form-field>              
                  <button [disabled]="!daftarMurid.valid" class="submit-button" type="submit">
                    <span>Tambahkan Murid</span>
                  </button>
                </div>    
              </form>

            </mat-card>    
            <!-- Card End -->
          </mat-tab>
          <!-- Daftar Siswa End -->
        </mat-tab-group>
      </mat-card>          

    </div>
  </div>
</section>

这是我的 app.module:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';


import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatListModule } from '@angular/material/list';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatTabsModule } from '@angular/material';
import { MatTableModule } from '@angular/material/table';
import { MatSelectModule } from '@angular/material';


import { HeaderComponent } from './components/header/header.component';
import { AdminComponent } from './pages/admin/admin.component';
import { SidemenuComponent } from './components/sidemenu/sidemenu.component';
import { LoginComponent } from './pages/login/login.component';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    AdminComponent,
    SidemenuComponent,
    LoginComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatToolbarModule,
    MatSidenavModule,
    MatIconModule,
    MatButtonModule,
    MatListModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatTabsModule,
    MatTableModule,
    MatSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

有人可以帮我解决吗？我已经尝试阅读下面的一些主题，但仍然失败

mat-table-angular-6-not-showing-any-data-despite-having-the-datasource

有人可以帮我解决吗？如果你想要一些例子，它就像我想要制作的这个 components/table/overview 例子一样。

这是我目前的状况:

Answer 1

工作StackBlitz link。

在 ts 中：更改了以下行

daftarMurid: FormGroup;

this.daftarMurid = this.formBuilder.group(

<table mat-table> 数据源没有显示，即使我从 Material Angular 完全复制它

<table mat-table> dataSource doesn't show up even though I Fully Copy it from Material Angular

typescript

angular-material2

angular

mat-table