angular - 无法在角度材料数据表中显示 json

Question

我想显示所有击球手以及他们的跑动并对他们进行排名，因为我已经对它们进行了排序。我无法显示它们。尽管我的本地休息 api 工作正常。

我尝试了一切，甚至认为 cors 是问题，但事实并非如此。但令我惊讶的是，这适用于 ngFor：

<h3>Ranking</h3>
  <p *ngFor="let row of ranking_arr">
    <li>{{row.total_runs}}</li>
    <li>{{row.batsman}}</li>
  </p>

排名组件.html

<div>
  <h3>Ranking</h3>
<table mat-table [dataSource]="datasource">
  <ng-container matColumnDef="batsman">
    <th mat-header-cell *matHeaderCellDef>batsman</th>
    <td mat-cell *matCellDef="let row">{{row.batsman}}</td>
  </ng-container>
  <ng-container matColumnDef="total_runs">
      <th mat-header-cell *matHeaderCellDef>total_runs</th>
      <td mat-cell *matCellDef="let row">{{row.total_runs}}</td>
    </ng-container>
<tr mat-header-row  *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row;columns:displayedcolumns;"></tr>
</table>
</div>

排名组件.ts

import { Component, OnInit } from '@angular/core';
import {MatTableDataSource} from '@angular/material';
import {RankingModel} from './rankingModel';
import  {RankingService} from './ranking.service'
@Component({
  selector: 'app-ranking',
  templateUrl: './ranking.component.html',
  styleUrls: ['./ranking.component.css']
})
export class RankingComponent implements OnInit {
  displayedColumns:string[]=['batsman','total_runs'];
  datasource=new MatTableDataSource();

  ranking_arr:RankingModel[]=[];

  constructor(private _ranking:RankingService) { 
    this._ranking.getAllRankings().subscribe(
      (data:RankingModel[])=>{
        this.ranking_arr=data;
        this.datasource.data=data;
      }
    )
  }

  ngOnInit() {
  }

}

index.js 文件

//Package imports
const express=require('express');
const cookieparser=require('cookie-parser');
const bodyparser=require('body-parser');
const cors = require('cors');
//Local imports
const {mongoose}=require('./db.js');
var matchesController =require('./controllers/matchesController.js');
var deliveryController=require('./controllers/deliveriesController.js');
var app=express();
app.use(bodyparser.json());
app.use(cookieparser());
app.use(cors({origin:'http://localhost:4200'}));
app.listen(3000,()=>console.log('Server started at port 3000')) ;
app.use(function(req, res, next) {
    res.setHeader("Access-Control-Allow-Origin", '*');
    res.setHeader("Access-Control-Allow-Credentials", true);
    res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.setHeader("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});

app.use('/matches',matchesController);
app.use('/deliveries',deliveryController);

预期结果应包含排名、击球手姓名、跑分数据表。请提前帮助和感谢。

标签： angularmongodbexpresssingle-page-applicationmean