Question

我正在使用均值栈来开发错误跟踪系统。

我的express.js服务返回一个问题数组，我将其分配给一个数组，然后将该数组作为数据源分配给mat-table，但该表未填充（即未填充）得到展示。甚至返回数组，但不填充表。

代码：角度视图

<mat-card>
    <button mat-raised-button color="primary" routerLink="/create">Create</button>
    <br>
    <br>
    <mat-divider></mat-divider>
    <br>
    <table mat-table [dataSource]="issues">
        <ng-container matColumnDef="title">
            <th mat-header-cell *matHeaderCellDef>Title</th>
            <td mat-cell *matCellDef="let element">{{element.title}}</td>
        </ng-container>
        <ng-container matColumnDef="responsible">
            <th mat-header-cell *matHeaderCellDef>Responsible</th>
            <td mat-cell *matCellDef="let element">{{element.responsible}}</td>
        </ng-container>
        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef>Status</th>
            <td mat-cell *matCellDef="let element">{{element.status}}</td>
        </ng-container>
        <ng-container matColumnDef="severity">
            <th mat-header-cell *matHeaderCellDef>Severity</th>
            <td mat-cell *matCellDef="let element">{{element.severity}}</td>
        </ng-container>
        <ng-container  matColumnDef="actions">
            <th mat-header-cell *matHeaderCellDef>Actions</th>
            <td mat-cell *matCellDef="let element">
                <button mat-button color="primary" (click)="editIssue(element.id)">Edit</button>
                <button mat-button color="primary" (click)="deleteIssue(element.id)">Delete</button>
            </td>
        </ng-container>

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

.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { MatTableDataSource } from '@angular/material';
import {Issues} from '../../../issue.model';
import {IssueService} from '../../../issue.service';


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

  issues: Issues[];
  displayedColumns: ['title', 'responsible', 'severity', 'status', 'actions'];
  constructor(private issueService: IssueService, private router: Router) { }

  ngOnInit() {
                this.fetchIssues();
          }

          fetchIssues() {
            this.issueService.getIssues().subscribe((data: Issues[]) => {
              this.issues = data;
              console.log('Data requested from the service....');
              console.log(this.issues);
          });
        }

问题模型：

export interface Issues {
    id: String;
    title: String;
    responsible: String;
    description: String;
    severity: String;
    status: String;
}

Answer 1

您忘记声明显示的列的数组：

在您的component.ts中：

public displayedColumns: string[] = ['title', 'responsible', 'severity', 'status'];

Demo

为什么即使服务正在返回数组也无法从源中填充物料表？

1 个答案: