Angular 显示表格中断页面

Question

我已经使用 angular 有一段时间了，花了一年的时间来做一些其他的事情，然后回来开发一个新网站，我正在开发一个似乎运行良好的网站，直到我尝试导入 mat-table 和所有它的依赖关系。

这是我拥有的主要组件的 .ts 代码

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {MatTableModule} from '@angular/material/table';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

只要我删除了导入部分中的 MatTableModule 行。页面再次照常显示。

.ts 文件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
}

.html 文件

    <!-- Toolbar -->
<div class="toolbar" role="banner">
  <img
    width="40"
    alt="game logo"
    src="https://gamepedia.cursecdn.com/valorant_esports_gamepedia_en/thumb/d/d9/Logo_square.png/123px-Logo_square.png?version=4e7ad8c9f85ac6ace6fa98cf2eecdbeb"
  />
  <span>Valorant LFG</span>
    <div class="spacer"></div>
    <!--anything for the right side of toolbar-->
</div>

<div class="content" role="main">
  <!-- Options -->
  <h2>Create a valorant team of your own, allowing other playerrs to join you</h2>

  <div class="card-container">

    <a class="card" target="_blank" rel="noopener" href="https://angular.io/cli">
      <img class="createteamicon" src="https://image.flaticon.com/icons/png/512/1189/1189206.png" alt="handshake" width="45" height="45">

      <span>Create Team</span>
    </a>

  </div>

  <div>
    <h2>Current LFG Requests, resets after 24 hours</h2>
  </div>

</div>
<router-outlet></router-outlet>

我确定我做了一些非常小的事情，但这是我的小问题。

这是 chrome 上的控制台错误

https://gyazo.com/05a62301b4937a8669690f1c2168f32b

如果您对此有任何答案，将不胜感激，谢谢

Answer 1

为你的项目添加角度材质

ng add @angular/material 
npm i 
ng serve 

Answer 2

我仍然不知道我做了什么，但是我创建了一个新项目并再次安装了材料并导入了表格，这次它工作了，所以我只是将文件复制到那个地方，它工作了

Answer 3

关于如何使用材料数据表模块的详细说明，您可以参考以下教程。

https://www.techiediaries.com/angular-material-table/