Question

我是角色新手并做一个示例项目，我想在网格中显示一些JSON数据。

我正在使用ag-grid。我从休息API获得了以下Json响应： -

[
 {
  "id": 64,
  "name": "Utopia",
  "language": "English",
  "genres": [
     "Drama",
     "Science-Fiction",
     "Thriller"
  ],
  "status": "Ended",
  "image": {
     "medium": "http://static.tvmaze.com/uploads/images/medium_portrait/0/474.jpg",
     "original": "http://static.tvmaze.com/uploads/images/original_untouched/0/474.jpg"
  }
 },
 {
  "id": 65,
  "name": "Bones",
  "language": "English",
  "genres": [
    "Drama",
    "Crime",
    "Medical"
  ],
  "status": "Ended",
  "image": {
    "medium": "http://static.tvmaze.com/uploads/images/medium_portrait/80/201202.jpg",
    "original": "http://static.tvmaze.com/uploads/images/original_untouched/80/201202.jpg"
   }
 }    
]

我能够成功地绑定id，name，language等简单键的数据，但是当涉及到绑定嵌套对象时，我无法做到。

如果你看一下上面的json回复，那么＆＃39;图像＆＃39; field是一个对象。如何才能获得“媒体”的价值？或者＆＃39;原创＆＃39;它的关键，只是在我的行中显示图像？

一些帮助表示赞赏，因为这是我遇到的问题。

以下是我的组件代码： -

shows.component.ts

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

  public gridOptions: GridOptions;
  public tvShowsColumnDefs = new ShowColumn;
  public showMetaData: any;

  constructor(private _contentService: ContentService, private _router: Router,
              private _route: ActivatedRoute) {

  // GridOptions Initialized
  this.gridOptions = <GridOptions>{};
  this.gridOptions.columnDefs = this.tvShowsColumnDefs.columnDefs;
}

ngOnInit() {
 // Prepare Grid Row Data
 this.prepareRowData();
}

prepareRowData() {
 // API Call for getting TV-Shows
 this._contentService.getAllShows()
   .subscribe(response => {
     const shows = response;
     console.log('TVShows-API Response ', shows);

    // Setting Grid RowData using api response
    this.gridOptions.api.setRowData(shows);

  });
}

show.columnDef.ts

export class ShowColumn {

public columnDefs = [
    { field: 'id', headerName: '', width: 50 },
    { field: 'image', headerName: '', width: 50, cellRendererFramework: null},
    { field: 'name', headerName: '', width: 250},
    { field: 'language', headerName: 'Language', width: 100},
    { field: 'genres', headerName: 'Genres', width: 250},
    { field: 'status', headerName: 'Status', width: 145 }
];
constructor() { }
}

Answer 1

嵌套属性可通过点符号（。）访问，例如：

{ field: 'image.medium', headerName: '', width: 50}

对于嵌套数组，value-getter很可能会完成这项任务：

function genreValueGetter(params) {
    const arr = params.data.genres as Array<string>;
    return arr.join(', ');
}

{ headerName: 'Genres', valueGetter: genreValueGetter, width: 250},

Answer 2

首先让我构建类：

export class myShow {
  image: myImage;
  id: number;
  ...

  constructor(obj: any) {
    this.document = new myImage(obj.image);
    this.id = obj.id;
    ...
  }
}

export class myImage {
  medium: string;
  original: string;

  constructor(obj?: any) {
    if(obj){
      this.medium = obj.medium;
      this.original = obj.original;
    }
  }
}

然后你可以使用.map operator

  allShows: myShow[] = [];

  prepareRowData(){
    this._contentService.getAllShows().map((shows: myShow[])=> {
        return shows.map((show: myShow)=>{
          return new myShow(show);
        })
    }).subscribe((allShows)=> {
        this.allShows = allShows;
    });
  }

在Angular4

2 个答案: