在 ngx-datatable 中显示导航属性

Question

我有一个像这样的 table 显示数据，包括几个导航属性：

<table class="table afcstandings">
        <thead>
            <tr>
                <th>team</th>
                <th>coach</th>
                <th>w</th>
                <th>l</th>
                <th>t</th>
                <th>fa</th>
                <th>agst</th>
                <th>diff</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let standing of standingsAFCEast">
                <!-- property binding rather than interpolation-->
                <td>{{ standing.team.teamName }}</td>
                <td>{{ standing.team.coach.coachName }}</td>
                <td>{{ standing.won }}</td>
                <td>{{ standing.lost }}</td>
                <td>{{ standing.tied }}</td>
                <td>{{ standing.pointsFor }}</td>
                <td>{{ standing.pointsAgainst }}</td>
                <td>{{ standing.pointsDifference }}</td>
            </tr>
        </tbody>
    </table>

这是正在读取的数据结构：

 [{"team":{"teamId":22,"teamName":"Carolina Panthers","coach":{"coachId":61,"coachName":"J Smith"},"division":{"divisionId":2,"divisionName":"NFC West"},"headerImage":"","logoImage":"","hex":"","r":null,"g":null,"b":null},"won":2,"lost":1,"tied":0,"pointsFor":82,"pointsAgainst":62,"pointsDifference":20}]

我的问题是，如何使用 ngx-datatable 显示这些数据？我测试了 3 个字段，teamName、coachName 和 won，并且能够显示 won 字段，但不能显示其他字段，因为我不确定如何深入到团队对象或教练对象。

<ngx-datatable class="ngx-datatable" [rows]="standingsAFCEast">
    <ngx-datatable-column name="team.teamName" [width]="300"></ngx-datatable-column>
    <ngx-datatable-column name="team.coach.coachName"></ngx-datatable-column>
    <ngx-datatable-column name="won"></ngx-datatable-column>
</ngx-datatable>

如有任何建议，我们将不胜感激！

Answer 1

看完basic examples, I made this work (Plunker here):

@Component({
  selector: 'my-app',
  template: `
    <div>
      <ngx-datatable
        [rows]="rows"
        [columns]="columns"
        [columnMode]="'force'"
        [headerHeight]="50"
        [footerHeight]="50"
        [rowHeight]="'auto'"
        [reorderable]="reorderable">
      </ngx-datatable>
    </div>
  `
})
export class AppComponent {

  standingsAFCEast = [{
    "team":{
      "teamId":22,
      "teamName":"Carolina Panthers",
      "coach":{
        "coachId":61,
        "coachName":"J Smith"
      },
      "division":{
        "divisionId":2,
        "divisionName":"NFC West"
      },
      "headerImage":"",
      "logoImage":"",
      "hex":"",
      "r":null,
      "g":null,
      "b":null
    },
    "won":2,
    "lost":1,
    "tied":0,
    "pointsFor":82,
    "pointsAgainst":62,
    "pointsDifference":20
  }]

  get rows () {
    return this.standingsAFCEast.map(standing => ({
      team: standing.team.teamName, 
      coach: standing.team.coach.coachName,
      w: standing.won,
      l: standing.lost,
      t: standing.tied,
      fa: standing.pointsFor,
      agst: standing.pointsAgainst,
      diff: standing.pointsDifference
    }))

  }
  // columns = [{name:'team'}, {name:'coach'}, {name:'w'}, {name:'l'}, {name:'t'}, {name:'fa'}, {name:'agst'}, {name:'diff'}]
  columns = Object.keys(this.rows[0]).map(val => ({name: val}))
}

如果有帮助请告诉我！

在 ngx-datatable 中显示导航属性

Displaying navigation properties in ngx-datatable

javascript

ngx-datatable

angular