我遇到了尝试导入Material组件的问题。尽管我使用的代码与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
}
const counter: BrojInfo[] = [];
for (let i = 0; i <= 1000; i++) {
counter.push({ broj: i, ime: "Name " + i, prezime: "Surname " + i });
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./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>
很抱歉如果这个问题太基础了,但我已经查看了Google搜索到的所有与此问题相关的Stack Overflow问答、官方文档,却始终无法解决。这是我首次接触Angular甚至是前端开发。感谢您花时间阅读我的问题。
我已经尝试过多种方法来编写imports: []
部分,甚至尝试创建一个app.module.ts文件,并在main.ts中替换为从app.module.ts文件导入,但仍然出现相同的错误。
编辑:忘记提了,我也尝试添加了tsconfig.app.json中的paths:
配置以及angular.json中的另一个配置项(忘记了确切名称),这对其他人解决了类似问题,但对我无效。
编辑2:具体来说,当我加入imports: [MatTableModule]
这一行时就会出现这个错误。