Question

运行角度代码时出现此错误...

NullInjectorError：StaticInjectorError（AppModule）[MatRowDef-> TemplateRef]： StaticInjectorError（平台：核心）[MatRowDef-> TemplateRef]：

我尝试了一些谷歌搜索，发现唯一的解决方案不起作用。无论如何，这是此问题来自的代码。我确实将所有依赖项导入到另一个文件夹中，因此如果您需要，请告诉我。感谢您的帮助！

打字稿：

import {Component} from '@angular/core';
import {DataService} from '../data/data.service';
import {Post} from '../Post';
import {DataSource} from '@angular/cdk/table';
import {Observable} from 'rxjs/Observable';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent {
  constructor(private dataService: DataService) {
  }

  displayedColumns = ['date_posted', 'title', 'category', 'delete'];
  dataSource = new PostDataSource(this.dataService);
}  

export class PostDataSource extends DataSource<any> {
  constructor(private dataService: DataService) {
    super();
  }

  connect(): Observable<Post[]> {
    return this.dataService.getData();
  }

  disconnect() {
  }
}

HTML：

<div>
<br>
  <div class="container">
      <div class="container">
        <div fxLayout="column" fxLayoutGap="20px" fxLayout.gt-md="row"  fxLayoutAlign="space-around center" class="content">
            <div class="blocks">
                <button button="submit" mat-raised-button color="primary">
                    <mat-icon>add</mat-icon> Add Post
                </button>
            </div>
      </div>
  </div>
  <br>
  <div class="container">
    <div fxLayout="row" fxLayoutAlign="center center" class="content">
      <mat-card class="card" >
        <mat-card-title fxLayout.gt-xs="row" fxLayout.xs="column">
          <h3>Recent Posts</h3>
        </mat-card-title>
        <mat-card-content>
            <div class="example-container mat-elevation-z8">
                <mat-table #table [dataSource]="dataSource">
                <ng-container matColumnDef="date_posted">
                  <mat-header-cell matHeaderCellDef> Date Posted </mat-header-cell>
                  <mat-cell matCellDef="let element"> {{element.date_posted  | date: 'd/M/y'}} </mat-cell>
                </ng-container>
                  <ng-container matColumnDef="title">
                    <mat-header-cell matHeaderCellDef> Title </mat-header-cell>
                    <mat-cell matCellDef="let element"> {{element.title}} </mat-cell>
                  </ng-container>
                  <ng-container matColumnDef="category">
                    <mat-header-cell matHeaderCellDef> Category </mat-header-cell>
                    <mat-cell matCellDef="let element"> {{element.category}} </mat-cell>
                  </ng-container>
                  <ng-container matColumnDef="delete">
                    <mat-header-cell matHeaderCellDef></mat-header-cell>
                    <mat-cell matCellDef="let element">
                      <a
                          type="button">
                        <mat-icon class="icon">delete</mat-icon>
                      </a>
                    </mat-cell>
                  </ng-container>
                  <mat-header-row matHeaderRowDef="displayedColumns"></mat-header-row>
                  <mat-row matRowDef="let row; columns: displayedColumns;"></mat-row>
                </mat-table>
              </div>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

Answer 1

找到了答案！我查找了其他使用MatDef的人的例子，其中一些人几乎没有*。我将*放在所有垫子的开头，并将其固定。

使用Angular材质MatDefs遇到运行时错误

1 个答案: