我遇到了一个问题，因为我不知 Prop 体该怎么做。
我有一个 JSON，我想使用 JSON 中的两个值求平均值
JSON
[
{
"player": {
"info": {
"position": "D",
"shirtNum": 4,
"positionInfo": "Centre/Right Central Defender"
},
"nationalTeam": {
"isoCode": "BE",
"country": "Belgium",
"demonym": "Belgian"
},
"age": "27 years 139 days",
"name": {
"first": "Toby",
"last": "Alderweireld"
},
"id": 4916,
"currentTeam": {
"name": "Tottenham Hotspur",
"teamType": "FIRST",
"shortName": "Spurs",
"id": 21
}
},
"stats": [
{
"name": "goals",
"value": 5
},
{
"name": "losses",
"value": 20
},
{
"name": "wins",
"value": 48
},
{
"name": "draws",
"value": 23
},
{
"name": "fwd_pass",
"value": 1533
},
{
"name": "goal_assist",
"value": 2
},
{
"name": "appearances",
"value": 80
},
{
"name": "mins_played",
"value": 6953
},
{
"name": "backward_pass",
"value": 308
}
]
}]
我在 AngularJS 中创建了一个函数，但我不知道是否好，或者我在 HTML 中调用好来显示进球值和比赛分钟数之间的平均值。
我在 Angular 中所做的功能是这个
$scope.mediaGoals = function () {
for (var i = 0; i < $scope.Jugador.stats.length; i++) {
for (var x=0; x< $scope.Jugador.stats[i].stats.length; x++) {
switch($scope.Jugador.stats[i].stats[x].name) {
case 'goals':
var tmp_goals = $scope.Jugador.stats[i].stats[x].value;
break;
case 'mins_played':
var tmp_mins = $scope.Jugador.stats[i].stats[x].value;
break;
}
}
$scope.Jugador.stats[i].media = tmp_goals/tmp_mins;
}
}
我制作了这个 HTML
<div class="stadistics">
<div class="cont-desc-player" ng-repeat="stat in Jugador.stats">
<div class="desc-player separador" ng-if="stat.name == 'appearances'">
<span class="txt-estadistics">Appearances</span>
<span class="num-estadistics">{{stat.value}}</span>
</div>
<div class="desc-player separador" ng-if="stat.name == 'goals'">
<span class="txt-estadistics">Goals</span>
<span class="num-estadistics">{{stat.value}}</span>
</div>
<div class="desc-player separador" ng-if="stat.name == 'goal_assist'">
<span class="txt-estadistics">Assists</span>
<span class="num-estadistics">{{stat.value}}</span>
</div>
<div class="desc-player separador" ng-if="stat.mediaGoals()">
<span class="txt-estadistics">Goals per match</span>
<span class="num-estadistics">{{stat.media}}</span>
</div>
</div>
</div>
拜托，你能帮我解决一下吗？因为我不知道我是否把这个功能做得很好，而且它没有显示任何东西。
最佳答案
您的代码有一些问题，我会尽力为您澄清。让我们从 HTML 开始。
ng-if="stat.mediaGoals()" 将永远匹配，因为对象 stat 没有 mediaGoals 函数，即使有它，您的 mediaGoals 函数也不会返回任何内容，更具体地说，是 undefined 。此外，在本例中，mediaGoals 是真正的性能 killer 。
我的建议是在加载 JSON 的服务中解析/转换 JSON，将内容转换为更容易在 HTML 中处理的内容。
由于我不知道加载 JSON 的代码，因此我将改编您的代码的说明性示例，希望它有所帮助。
假设我们使用 $http 从 API 加载 JSON
$http(requestConfig)
.then(function(response){
var players = [];
for (var i = 0; i < response.data.length; i++) {
var item = response.data[i];
var player = {
player: item.player,
stats: { media: 0 }
};
var tmp_goals = 0;
var tmp_mins = 0;
for (var x=0; x < item.stats.length; x++) {
var stat = item.stats[x];
player.stats[stat.name] = stat.value;
switch(stat.name) {
case 'goals':
tmp_goals = stat.value;
break;
case 'mins_played':
tmp_mins = stat.value;
break;
}
}
if (tmp_mins > 0) {
player.stats.media = tmp_goals/tmp_mins;
}
players.push(player);
}
return players;
});
现在，每次我们从该列表中获取单个项目时，它都会如下所示:
{
player: {
info: ...same from anwser
},
stats: {
appearances: 80,
backward_pass: 308,
draws: 23,
fwd_pass: 1533,
goal_assist: 2,
goals: 5,
losses: 20,
media: 0.0007191140514885661,
mins_played: 6953,
wins: 48
}
}
请注意，为了简洁起见，我没有提供一些信息。但是现在，当我们将解析/转换列表中的一项设置为 $scope.Jugador 时，HTML 将变得更加简单，不需要 ngRepeat 或 ngIf。
<div class="stadistics">
<div class="cont-desc-player">
<div class="desc-player separador">
<span class="txt-estadistics">Appearances</span>
<span class="num-estadistics">{{Jugador.stats.appearances}}</span>
</div>
<div class="desc-player separador">
<span class="txt-estadistics">Goals</span>
<span class="num-estadistics">{{Jugador.stats.goals}}</span>
</div>
<div class="desc-player separador">
<span class="txt-estadistics">Assists</span>
<span class="num-estadistics">{{Jugador.stats.goal_assist}}</span>
</div>
<div class="desc-player separador">
<span class="txt-estadistics">Goals per match</span>
<span class="num-estadistics">{{Jugador.stats.media}}</span>
</div>
</div>
</div>
或者您可能想保留 ngIf 并仅在值大于 0 时显示信息
<div class="desc-player separador" data-ng-if="Jugador.stats.media > 0">
<span class="txt-estadistics">Goals per match</span>
<span class="num-estadistics">{{Jugador.stats.media}}</span>
</div>
从现在开始一切都取决于你，希望对你有所帮助。
编辑:
如果您想继续使用 mediaGoals 函数，那么您需要在将值设置为 Jugador 之前在 Controller 中调用它，因此需要进行一些更改。
$scope.Jugador = mediaGoals($scope.players[0]);
function mediaGoals(jugador) {
var tmp_goals = 0;
var tmp_mins = 0;
for (var i = 0; i < jugador.stats.length; i++) {
switch(jugador.stats[i].name) {
case 'goals':
tmp_goals = jugador.stats[i].value;
break;
case 'mins_played':
tmp_mins = jugador.stats[i].value;
break;
}
}
jugador.stats.push({ name: 'media', value: tmp_mins > 0 ? tmp_goals/tmp_mins : 0 });
return jugador;
}
根据您的需求调整$scope.players[0]。
现在，您的 HTML 可以更改为这样
<div class="desc-player separador" ng-if="stat.name == 'media'">
<span class="txt-estadistics">Goals per match</span>
<span class="num-estadistics">{{stat.value}}</span>
</div>
关于javascript - 使用 AngularJS 对 Json 中的 2 个值求平均值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45827860/