Question

我正在努力在我的角度材料表中加载数据。列标题按预期显示，除了现在有数据行。奇怪的是，表使用的数据源中有数据。请参阅下面的代码（或图片）：

用于填充数据源的对象类型

export default interface UserStripeTableResource {
    id: number;
    fullName: string;
    saldo: number;
    totalstripes: number;
}

这是用于填充表格列表的界面，我觉得没什么奇怪的。

组件（.ts 文件）

@Component({
  selector: 'app-admin-editsaldo',
  templateUrl: './admin-editsaldo.component.html',
  styleUrls: ['./admin-editsaldo.component.css']
})
export class AdminEditsaldoComponent implements OnInit {

  @Input() allusersstripes: UserStripeTableResource[];
  @Output() RefreshListOfUsers = new EventEmitter<any>();


  dataSource: MatTableDataSource<UserStripeTableResource> = new MatTableDataSource();
  dataDisplayedColumns: string[] = ['id', 'fullName', 'saldo', 'totalstripes'];

  selectedamount: number = null;

  constructor(
  ) { }

  ngOnChanges(changes: SimpleChange): void {
  }

  ngOnInit() {
    this.dataSource = new MatTableDataSource(this.allusersstripes);
    console.log(this.dataSource.data);
  }

处理表格填充逻辑的文件。如您所见，数据由父提供程序提供（请参阅@input）。数据立即分配给 ngOnInit 中的数据源。列也正确指定，如 html 页面所示。

HTML 页面

<div *ngIf="dataSource">

    <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">

        <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

        <!-- Position Column -->
        <ng-container matColumnDef="id">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <!-- Name Column -->
        <ng-container matColumnDef="fullName">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Naam </th>
            <td mat-cell *matCellDef="let element"> {{element.fullName}} </td>
        </ng-container>

        <!-- Weight Column -->
        <ng-container matColumnDef="saldo">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Saldo </th>
            <td mat-cell *matCellDef="let element"> {{element.saldo}} </td>
        </ng-container>

        <!-- Symbol Column -->
        <ng-container matColumnDef="totalstripes">
            <th mat-header-cell *matHeaderCellDef mat-sort-header> Totaal strepen </th>
            <td mat-cell *matCellDef="let element"> {{element.totalstripes}} </td>
        </ng-container>

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

</div>

应显示表格的 html 页面。列与 .ts 文件中指定的名称匹配，并且与对象属性相同。

Image showing html page with datasource log

我已经尝试过的事情：

仔细检查是否正确导入了每个需要的模块。
在呈现表格之前使用 ngIf，以确保在呈现表格之前填充数据源。
直接在 html 页面上将数据源打印为 JSON，以便在呈现表格之前仔细检查它是否存在。
尝试使用角度材料网站本身的给定示例，这是有效的（但它使用静态数据，因此我猜不是真正可比的）
在子组件的父组件中尝试启用 ngIf，以确保在实际呈现组件之前异步数据已存在。

我真的没有想法，已经为此苦苦挣扎了几天。我真的希望有人能帮助我:)

The html source (with no custom css source)

使用的软件包列表

brandfonds-website@0.0.0 E:\Prive Projecten\Coding\Brandfonds\Brandfonds-Frontend
├── @angular-devkit/build-angular@0.1100.7
├── @angular/animations@11.1.0
├── @angular/cdk@11.1.0
├── @angular/cli@11.1.1
├── @angular/common@11.1.0
├── @angular/compiler-cli@11.1.0
├── @angular/compiler@11.1.0
├── @angular/core@11.1.0
├── @angular/flex-layout@11.0.0-beta.33
├── @angular/forms@11.1.0
├── @angular/language-service@11.1.0
├── @angular/localize@11.1.0
├── @angular/material@11.1.0
├── @angular/platform-browser-dynamic@11.1.0
├── @angular/platform-browser@11.1.0
├── @angular/router@11.1.0
├── @fortawesome/fontawesome-free@5.15.2
├── @full-fledged/alerts@11.0.0
├── @types/chart.js@2.9.30
├── @types/jasmine@3.3.16
├── @types/jasminewd2@2.0.8
├── @types/node@8.9.5
├── animate.css@4.1.1
├── chart.js@2.9.4
├── codelyzer@5.2.2
├── font-awesome@4.7.0
├── hammerjs@2.0.8
├── jasmine-core@3.4.0
├── jasmine-spec-reporter@4.2.1
├── karma-chrome-launcher@2.2.0
├── karma-coverage-istanbul-reporter@2.0.6
├── karma-jasmine-html-reporter@1.5.4
├── karma-jasmine@2.0.1
├── karma@5.1.1
├── ng-swagger-gen@2.3.0
├── protractor@7.0.0
├── rxjs@6.6.3
├── ts-node@7.0.1
├── tslib@2.1.0
├── tslint@6.1.3
├── typescript@4.0.5
└── zone.js@0.11.3

Answer 1

我 reproduced your example in a stackblitz 使用最新的 angular 11 版本，它似乎可以工作。

编辑：

ngOnInit 使用空/未定义数据调用一次，因为 http 请求仍在进行中。输入数据会更新，但由于没有实现 OnChanges 接口，AdminEditsaldoComponent 不会对新数据执行任何操作。

解决方案是要么实现 OnChanges 接口，要么在父组件中隐藏 AdminEditsaldoComponent 直到您加载数据（...)

角度材料表组件不显示数据

1 个答案: