Почему таблица материалов не заполняется из источника, даже если массив возвращается службой?

Question

Я использую средний стек для разработки системы отслеживания ошибок.

Мой сервис express.js возвращает массив проблем , который я присваиваю массиву, а затем присваиваюэтот массив как источник данных для таблицы mat, но таблица не заполняется, т.е. не отображается.Даже массив возвращается, но таблица не заполняется.

Код: Угловое представление

<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'];

Демо