我一直在try 进口material 时遇到问题.我已经使用了类似于他们在Material.angular.io上的示例的代码,但是我得到了"Inject()必须从注入上下文中调用……"错误.我只是试图让它作为一个简单的表工作,因为我主要需要专注于设计部分,而不是它背后的广泛功能.

双手

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 ,还有前端本身.谢谢您抽时间见我.

I've tried multiple ways that I could find to possibly write the imports: [] part, even tried to make the app.module.ts file and use it instead of the App.component.ts file import in 双手, but I still had the same error.

编辑:忘了提一下,我还试图将paths:添加到tsfig.app.json中,并将另一个(忘记了这个词)添加到angular.json中,这对其他一些Peers有效.

编辑2:当我将imports: [MatTableModule]行放入时,错误特别出现

推荐答案

我找到了答案!由于该项目是使用VS2022模板创建的,Package Manager控制台决定在解决方案文件所在的项目主目录而不是Package.json所在的实际子文件夹中安装MASTY@ANGLING/MATERIAL包.

Javascript相关问答推荐

脚本.js:3:20未捕获的类型错误:无法读取空的属性(读取addEventHandler)

不渲染具有HTML参数的React元素

foreach循环中的Typescript字符串索引

有Angular 的material .未应用收件箱中的价值变化

ReactJS中的material UI自动完成类别

使用json文件字符串来enum显示类型字符串无法按照计算的enum成员值的要求分配给类型号

Promise Chain中的第二个useState不更新

更改JSON中使用AJAX返回的图像的路径

如何在模块层面提供服务?

无法从NextJS组件传递函数作为参数'

如何使onPaste事件与可拖动的HTML元素一起工作?

Chart.js-显示值应该在其中的引用区域

我可以使用使用node.js创建的本地主机来存储我网站上提交的所有数据吗?没有SQL或任何数据库.只有HTML语言

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

更改预请求脚本中重用的JSON主体变量- Postman

以Angular 实现ng-Circle-Progress时出错:模块没有导出的成员

AJAX POST在控制器中返回空(ASP.NET MVC)

如何更改Html元素S的 colored颜色 ,然后将其褪色为原始 colored颜色

我不知道如何纠正这一点.

Chart.js Hover线条在鼠标离开时不会消失