当我在Leaderboard.component.ts中的 ngOnInit（）中调用 this.getLeaderboard（）; 时，排行榜仅在页面开始或页面刷新时显示，这是正常的。但是我也想在app.component.ts的按钮单击上获取并显示排行榜。
当我单击按钮时，流程转到leaderboard.component，它调用leaderboard.service，但是leaderboard.component.html中没有显示或更新任何内容。如果我console.log的值在那里，但是DOM没有更新...
我在这里想念什么？
app.component.html
<div class="col nopadding">
<button id="bottomButton2" type="button" class="btn btn-bottom" (click)="getLeaderboard()">
<img id="bottom2" class="navbar-bottom-pics" src="assets\img\podium.svg">
<img id="bottom22" class="navbar-bottom-pics hide" src="assets\img\podiumSelected.svg">
</button>
</div>
app.component.ts
import { Component, Injectable } from '@angular/core';
import { MatchesComponent } from './matches/matches.component';
import { LeaderboardComponent } from './leaderboard/leaderboard.component';
import { ClubStatisticsComponent } from './club-statistics/club-statistics.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [LeaderboardComponent,MatchesComponent,ClubStatisticsComponent]
})
export class AppComponent{
constructor(private match_component:MatchesComponent, private
leaderboard_component:LeaderboardComponent, private
clubstatistics_component:ClubStatisticsComponent){}
//CALLS FOR BOTTOM NAVBAR
getLeaderboard(){
//POSITION SCREEN TO TOP
window.scrollTo(0, 0);
//CALL GET LEADERBOARD
this.leaderboard_component.getLeaderboard();
}
leaderboard.component.ts
import { Component, OnInit, Injectable} from '@angular/core';
import { leaderboardInstance } from './leaderboardInstance';
import { LeaderboardService } from './leaderboard.service';
@Component({
selector: 'app-leaderboard',
templateUrl: './leaderboard.component.html',
styleUrls: ['./leaderboard.component.css'],
providers: [LeaderboardService]
})
@Injectable()
export class LeaderboardComponent implements OnInit {
public leaderboard: leaderboardInstance[];
public finalLeaderboard: leaderboardInstance[] = new Array();
constructor(private leaderboard_service: LeaderboardService) { }
ngOnInit() {
this.getLeaderboard();
}
//GET ACTUAL SERVER JSON RESPONSE AND SUBSCRIBE IT TO array
getLeaderboard(){
console.log("leaderboardComponent");
this.leaderboard_service.getLeaderboard().subscribe(leaderboard =>{ this.leaderboard = this.formatMatchesSingles(leaderboard)});
}
formatMatchesSingles(leaderboard){
console.log("formatMatches");
let uniqueNames = [];
let uniqueSurnames = [];
let matchesPlayed = [];
let matchesWon = [];
for(let i = 0; i< leaderboard.length; i++){
//FIND ALL UNIQUE NAMES
if(uniqueNames.indexOf(leaderboard[i].name1) === -1){
uniqueNames.push(leaderboard[i].name1);
}
if(uniqueNames.indexOf(leaderboard[i].name2) === -1){
uniqueNames.push(leaderboard[i].name2);
}
//FIND ALL UNIQUE SURNAMES
if(uniqueSurnames.indexOf(leaderboard[i].surname1) === -1){
uniqueSurnames.push(leaderboard[i].surname1);
}
if(uniqueSurnames.indexOf(leaderboard[i].surname2) === -1){
uniqueSurnames.push(leaderboard[i].surname2);
}
}
//CALCULATE MATCHES PLAYED
for(let i=0;i<uniqueNames.length;i++){
let played = leaderboard.reduce(function(s, o) {
if (o.name1 === uniqueNames[i] && o.doubles == "0") s++;
if (o.name2 === uniqueNames[i] && o.doubles == "0") s++;
return s;
}, 0);
matchesPlayed[i]=played;
}
//CALCULATE WINS
for(let i=0;i<uniqueNames.length;i++){
let wins = leaderboard.reduce(function(s, o) {
if (o.name1 === uniqueNames[i] && o.sets_team1 > o.sets_team2 && o.doubles == "0") s++;
else if(o.name2 === uniqueNames[i] && o.sets_team2 > o.sets_team1 && o.doubles == "0") s++;
return s;
}, 0);
matchesWon[i]=wins;
}
//CREATE USER OBJECT, ASSIGN ALL VARIABLES AND ADD IT TO ARRAY
for (let i = 0; i < uniqueNames.length; i++) {
let MatchesNo: number = parseFloat(matchesPlayed[i]);
let MatchesWonNo: number = parseFloat(matchesWon[i]);
let MatchesLostNo: number = MatchesNo - MatchesWonNo; //CALCULATE LOSES
let WinPercentage: number;
if (MatchesNo > 0 && MatchesWonNo == 0) WinPercentage = 0;
else WinPercentage = (MatchesWonNo/MatchesNo)*100; //CALCULATE PERCENTAGE
let newInstance = new leaderboardInstance();
newInstance.name = uniqueNames[i];
newInstance.surname = uniqueSurnames[i]
newInstance.played = matchesPlayed[i];
newInstance.wins = matchesWon[i];
newInstance.loses = MatchesLostNo;
newInstance.percentage = Math.floor(WinPercentage);
this.finalLeaderboard.push(newInstance);
}
//SORT
this.finalLeaderboard.sort(function(a, b){
if(a.wins === b.wins){
if(a.percentage != b.percentage){ //SORT BY PERCENTAGE
let x = a.percentage, y = b.percentage;
return y < x ? -1 : y > x ? 1 : 0;
}
else{ //IF ALSO PERCENTAGES ARE THE SAME THEN SORT BY PLAYED MATCHES
let x = a.played, y = b.played;
return y < x ? -1 : y > x ? 1 : 0;
}
}
return b.wins - a.wins //DEFAULT SORT BY WINS
});
return this.finalLeaderboard;
}
}
leaderboard.service.ts
import { Injectable } from '@angular/core';
import { leaderboardInstance } from './leaderboardInstance';
import { Observable, Subject } from 'rxjs';
import { HttpClient, HttpParams } from '@angular/common/http';
import {SHA256} from 'crypto-js';
@Injectable()
export class LeaderboardService {
constructor(private http: HttpClient) { }
getLeaderboard(): Observable<leaderboardInstance[]> {
console.log("leaderboardservice");
let url="ourAPIurl";
var salt = "1234"
var hash1 = SHA256(salt+"lalalala");
localStorage.setItem('methodName', 'GetMatchesOfGroup');
localStorage.setItem('userId', '2');
localStorage.setItem('token', String(hash1));
localStorage.setItem('id_group', '7');
localStorage.setItem('password', String(hash1));
localStorage.setItem('madCheck', 'bc8fcafb0829db3744d0aad45ebda03882d25367291de3883a8c7f75a9c45fb5');
const params = new HttpParams()
.set('methodName', localStorage.getItem('methodName'))
.set('userId', localStorage.getItem('userId'))
.set('token', localStorage.getItem('token'))
.set('id_group', localStorage.getItem('id_group'))
.set('password', localStorage.getItem('password'))
.set('madCheck', localStorage.getItem('madCheck'));
return this.http.post<leaderboardInstance[]>(url, params, {responseType: 'json'});
}
}
leaderboard.component.html
<tbody>
<tr *ngFor="let leaderboardInstance of leaderboard; index as i">
<td width=25><div id="rank1">{{i+1}}</div></td>
<td><a class="name-table">{{leaderboardInstance.name | uppercase}} {{leaderboardInstance.surname | uppercase | slice:0:1}}<span>.</span></a></td>
<td class="played">{{leaderboardInstance.played}}</td>
<td class="won">{{leaderboardInstance.wins}}</td>
<td class="loses">{{leaderboardInstance.loses}}</td>
<td class ="percentage" class="center">{{leaderboardInstance.percentage}}<span>%</span></td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：2)
我认为您想通过ViewChild批注获取组件引用，并像这样从构造函数中删除它们：
export class AppComponent{
@ViewChild(MatchesComponent)
private match_component: MatchesComponent;
@ViewChild(LeaderboardComponent)
private leaderboard_component: LeaderboardComponent;
@ViewChild(ClubStatisticsComponent)
private clubstatistics_component: ClubStatisticsComponent;
constructor(){}
并将它们从providers中的AppComponent数组中删除。通常，您只希望将服务注入到这样的组件中。
答案 1 :(得分：0)
也许leaderboard数组仅在更新其条目，而不是列表本身？如果您在同一列表中添加或删除元素，Angular不会检测到更改。您可以使用此处提供的答案：https://stackoverflow.com/a/42962723/1471485，也可以在获得排行榜时重新创建列表：
this.leaderboard = [].concat(this.formatMatchesSingles(leaderboard));
使用[].concat创建一个新实例，Angular将检测到更改。