我想显示所有的击球手及其跑动,并按照已经对它们进行排序的方式对它们进行排名。我无法显示它们。尽管我的本地rest api工作正常。
我什至尝试所有操作,甚至认为cors是问题所在,但事实并非如此。 但是令我惊讶的是,它正在为ngFor工作:
<h3>Ranking</h3>
<p *ngFor="let row of ranking_arr">
<li>{{row.total_runs}}</li>
<li>{{row.batsman}}</li>
</p>
rankingcomponent.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>
rankingcomponent.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);
预期结果应包含等级,击球手姓名,得分数据表。 请先帮助并谢谢。