angular - angular 4 - 如何以垂直方式显示 json 数组

Question

从后端我得到说注释的 json 数组（一个 json 是一个注释），即

 [
  {
    "StrategyName": "ClearBridge Aggresive Growth fund",
    "ProductType": "MF",
    "FirmName": "ABC",
    "Complement": "",
    "TakeOver": "",
    "PlatformFirm": "",
    "PlatformName": "",
    "topics": [
      {
        "title": "Strategy/Objective",
        "text": "System to allow Owner modify product notes and save as a new note."
      },
      {
        "title": "People",
        "text": "This allows Owner to quickly create a note for different vehicle types by cloning the existing, This allows Owner to quickly create a note for different vehicle types by cloning the existing, This allows Owner to quickly create a note for different vehicle types by cloning the existing"
      },
      {
        "title": "Philosophy/Process",
        "text": "Process content"
      },
      {
        "title": "Roles",
        "text": "Currently has 40% foreign exposure"
      },
      {
        "title": "Positioning",
        "text": " test Positioning content "
      },
      {
        "title": "Composition",
        "text": " test Composition content "
      },
      {
        "title": "Performance",
        "text": " test Performance content "
      },
      {
        "title": "Current Allocation",
        "text": "Current Allocation "
      },
      {
        "title": "Miscellaneous",
        "text": "Miscellaneous Content "
      }
    ]
  },
  {
    "StrategyName": "JhanCock Global absolute Ret",
    "ProductType": "MF",
    "FirmName": "BCD",
    "Complement": "",
    "TakeOver": "",
    "PlatformFirm": "",
    "PlatformName": "",
    "topics": [
      {
        "title": "Strategy/Objective",
        "text": "test strategy"
      },
      {
        "title": "People",
        "text": "test people"
      },
      {
        "title": "Philosophy/Process",
        "text": "Process content"
      },
      {
        "title": "Roles",
        "text": "Currently has 30% foreign exposure"
      },
      {
        "title": "Positioning",
        "text": " test Positioning content 2 "
      },
      {
        "title": "Composition",
        "text": " test Composition content 2 "
      },
      {
        "title": "Performance",
        "text": " test Performance content 2 "
      },
      {
        "title": "Current Allocation",
        "text": "Current Allocation 2 "
      },
      {
        "title": "Miscellaneous",
        "text": "Miscellaneous Content 2 "
      }
    ]
  }
]

在角度我使用 MaterialTable 。我能够在一行中显示一个注释。

Name、FundType、FirmName、topic1、topic2、topic3（标题行）

ClearBridge 积极成长基金,MF,ABC,topic1, topic2 , topic3 ..

JhanCock 全球绝对 Ret,MF,BCD, topic1, topic2, topic3..

但要求是以垂直方式显示

名称 - ClearBridge Aggressive Growth 基金，JhanCock Global absolute Ret

基金类型 - MF

公司名称 - ABC , BCD

主题1 - 主题1，主题1

主题 2 - 主题 2 , 主题 2

主题 3 - 主题 3，主题 3

数据是 Note 数组，即 Note[] （在 materialtable 中，this.dataSource.data = data as Notes[];）我正在寻找另一个说 NoteDisplay[] 的数组。NotDisplay[] 将具有垂直方式的数据。请指导是否有其他方法可以工作？

标签： angularangular-materialmat-table