尝试导入材料时出现错误NG0203

Question

我在尝试导入材料时遇到问题。我使用了与material.angular.io 上的示例类似的代码，但我收到“inject() 必须从注入上下文调用...”错误。我只是试图让它作为一个简单的表格工作，因为我主要需要关注设计部分而不是其背后的广泛功能。

main.ts

import { AppComponent } from './app/app.component';
import { bootstrapApplication } from '@angular/platform-browser';

bootstrapApplication(AppComponent).catch(err => console.error(err));

app.component.ts

import { Component } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

interface brojInfo {
  broj: number,
  ime: string,
  prezime: string
}

var counter: brojInfo[] = [];

for (var i = 0; i <= 1000; i++) {
  counter.push({ broj: i, ime: "Name " + i, prezime: "Surname " + i });
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
  standalone: true,
  imports: [MatTableModule]
})

export class AppComponent {
  displayedColumns: string[] = ['broj', 'ime', 'prezime'];
  dataSource = counter;
}

app.component.html

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="broj">
    <th mat-header-cell *matHeaderCellDef> Broj </th>
    <td mat-cell *matCellDef="let element"> {{element.broj}} </td>
  </ng-container>

  <ng-container matColumnDef="ime">
    <th mat-header-cell *matHeaderCellDef> Ime </th>
    <td mat-cell *matCellDef="let element"> {{element.ime}} </td>
  </ng-container>

  <ng-container matColumnDef="prezime">
    <th mat-header-cell *matHeaderCellDef> Prezime </th>
    <td mat-cell *matCellDef="let element"> {{element.prezime}} </td>
  </ng-container>

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

如果这个问题太简单了，我很抱歉，但我已经浏览了谷歌向我展示的与此问题相关的所有问题以及文档本身，但出于对它的热爱，我无法弄清楚这一点。这是我第一次不仅使用 Angular，还使用前端本身。谢谢您的宝贵时间。

我尝试了多种方法，我可以找到可能编写

imports: []

部分的方法，甚至尝试制作 app.module.ts 文件并使用它而不是 main.ts 中导入的 app.component.ts 文件，但是我仍然有同样的错误。

编辑：忘了提及，我还尝试将

paths:

添加到 tsconfig.app.json 并将其他内容（忘记了这个词）添加到 angular.json 中，这对其他一些人有用。

Answer 1

查看 Angular 存储库上的此问题。

基本上，您存在依赖性问题，您的捆绑包中有多个实例

@angular/core

。

npm ls @angular/core

应该可以给你一些见解

Answer 2

提供的代码工作正常，请在下面找到一个工作的 stackblitz，如果问题仍然存在，请修改 stackblitz 并分享回来！

在源代码中搜索您正在使用的某个地方

inject()

也许这会让您更接近解决方案！

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { MatTableModule } from '@angular/material/table';
import 'zone.js';

interface brojInfo {
  broj: number;
  ime: string;
  prezime: string;
}

var counter: brojInfo[] = [];

for (var i = 0; i <= 1000; i++) {
  counter.push({ broj: i, ime: 'Name ' + i, prezime: 'Surname ' + i });
}

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="broj">
    <th mat-header-cell *matHeaderCellDef> Broj </th>
    <td mat-cell *matCellDef="let element"> {{element.broj}} </td>
  </ng-container>

  <ng-container matColumnDef="ime">
    <th mat-header-cell *matHeaderCellDef> Ime </th>
    <td mat-cell *matCellDef="let element"> {{element.ime}} </td>
  </ng-container>

  <ng-container matColumnDef="prezime">
    <th mat-header-cell *matHeaderCellDef> Prezime </th>
    <td mat-cell *matCellDef="let element"> {{element.prezime}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
  `,
  imports: [MatTableModule],
})
export class App {
  displayedColumns: string[] = ['broj', 'ime', 'prezime'];
  dataSource = counter;
}

bootstrapApplication(App);

堆栈闪电战