解析器错误：表达式结尾出现意外的标记，预期的标识符或关键字

Question

当我尝试显示API的数据时，出现错误。 我想要的是显示每个数据，如果您要分析它，我将保留API的URL。 https://age-of-empires-2-api.herokuapp.com/api/v1/civilizations

civilizationes.component.ts

import { Component, OnInit } from '@angular/core';
import { GameService } from '../../services/game.service';

@Component({
  selector: 'app-civilizaciones',
  templateUrl: './civilizaciones.component.html',
  styleUrls: ['./civilizaciones.component.css']
})
export class CivilizacionesComponent implements OnInit {

  civilizaciones: any = [];

  constructor(private gameService: GameService) { }

  ngOnInit() {
    this.gameService.getCivilizations().subscribe(
      res => {
        this.civilizaciones = res;
      },
      err => console.error(err)
    );
  }
}

civilizationes.component.html

<tr *ngFor="let civilizacion of civilizaciones">
    <td>{{civilizacion.name}}</td>
</tr>

API

{
  "civilizations": [
    {
      "id": 1, 
      "name": "Aztecs", 
      "expansion": "The Conquerors", 
      "army_type": "Infantry and Monk", 
      "unique_unit": [
        "https://age-of-empires-2-api.herokuapp.com/api/v1/unit/jaguar_warrior"
      ], 
      "unique_tech": [
        "https://age-of-empires-2-api.herokuapp.com/api/v1/technology/garland_wars"
      ], 
      "team_bonus": "Relics generate +33% gold", 
      "civilization_bonus": [
        "Villagers carry +5", 
        "Military units created 15% faster", 
        "+5 Monk hit points for each Monastery technology", 
        "Loom free"
      ]
    },

Answer 1

尝试

<tr *ngFor="let civilizacion of civilizaciones.civilizations">
    <td>{{civilizacion.name}}</td>
</tr>

Answer 2

来自api的响应具有一个名为civilizations的根属性，因此您需要分配它而不是响应本身。

 ngOnInit() {
    this.gameService.getCivilizations().subscribe(
      res => {
         this.civilizaciones = res.civilizations; 
      },
      err => console.error(err)
    );
  }