在Angular4中将嵌套的JSON响应设置为行数据到ag-grid答案

【问题标题】：Set nested JSON Response as rowdata to ag-grid in Angular4在Angular4中将嵌套的JSON响应设置为行数据到ag-grid
【发布时间】：2018-06-29 10:24:30
【问题描述】：

我是 Angular 新手，正在做一个示例项目，我想在网格中显示一些 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、名称、语言等，但在绑定嵌套对象时，我无法做到。

如果你看上面的 json 响应，'image' 字段是一个对象。如何从中获取 'medium' 或 'original' 键的值并在我的行中显示图像？

感谢您的帮助，因为这是我遇到的问题。

下面是我的组件代码：-

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() { }
}

【问题讨论】：

标签： json angular rest ag-grid

【解决方案1】：

首先让我建立类：

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 操作符

  allShows: myShow[] = [];

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

【讨论】：

我期待一种将数据绑定到 ag-grid 的方法。你能告诉我怎么做吗？
您只需要从example 为单元格创建一个模板，例如 RatioModule 或 ClickableModule，然后在 RichComponent 中使用它们（示例中的名称）

【解决方案2】：

嵌套属性可通过点符号 (.) 访问，例如：

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

对于嵌套数组，值获取器很可能会完成这项工作：

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

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

【讨论】：