json 将模型返回到Angular ,但不显示动态表中的所有字段

juzqafwq  于 2023-02-26  发布在  Angular
关注(0)|答案(1)|浏览(292)

我有一些视图模型,我从API,这些模型应该显示在动态表中的Angular 。例如CountryTableViewModel

public class CountryTableViewModel : IMapFrom<Country>
{
    public int ID { get; set; }
    public string CreatedBy {get;set;}
    public string Name { get; set; }
    public bool Active { get; set; }
}

应用过滤器后,响应模型如下所示:

{
    "pageNumber": 1,
    "pageSize": 10,
    "totalPages": 1,
    "totalRecords": 3,
    "succeeded": true,
    "data": [
        {
            "createdBy": "Admin",
            "id": 1,
            "name": "England",
            "active": true
        },
        {
            "createdBy": "Admin",
            "id": 6,
            "name": "Italy",
            "active": true
        },
        {
            "createdBy": "Operator",
            "id": 4,
            "name": "France",
            "active": true
        }
    ],
    "errors": ""
}

现在,我想在Angular中创建动态表,但问题是我不想显示表中的所有字段。在本例中,ID不应显示在表中,但我仍然需要它,因此当管理员单击某行时,它可以编辑它,我使用此ID来标识确切的行。现在,我的所有表都具有相同的ID情况。我可以在Angular中进行过滤,其中如果key是ID,则跳过该字段。但是,将来可能会有更多字段需要发送到Angular,并且它们不应显示在表中。
我考虑了两个解决方案,一个是在响应中多做一个List,带有应该跳过的字段的名称,例如:

{
"pageNumber": 1,
"pageSize": 10,
"totalPages": 1,
"totalRecords": 3,
"succeeded": true,
"data": [
    ...
],
"errors": "",
"fieldsForSkipping": [{"ID"}, {"CreatedBy"} ]

}
另一个解决方案是创建一些TablePropertyClass,它有两个属性,object Valuebool ShownInTable,然后Map我的视图模型,最后得到:

{
   "pageNumber":1,
   "pageSize":10,
   "totalPages":1,
   "totalRecords":2,
   "succeeded":true,
   "data":[
      {
         "createdBy":{
            "value":"Admin",
            "ShownInTable":false
         },
         "id":{
            "value":1,
            "ShownInTable":false
         },
         "name":{
            "value":"England",
            "ShownInTable":true
         },
         "active":{
            "value":true,
            "ShownInTable":true
         }
      },
      {
         "createdBy":{
            "value":"Admin",
            "ShownInTable":false
         },
         "id":{
            "value":1,
            "ShownInTable":false
         },
         "name":{
            "value":"France",
            "ShownInTable":true
         },
         "active":{
            "value":true,
            "ShownInTable":true
         }
      }
   ],
   "errors":""
}

第二个选项似乎更好,因为我可以用第三个属性HeaderName扩展TablePropertyClass,在那里我可以使用它来个性化表中的标题,而不使用数据注解,但我仍然想知道是否有第三个更好的选项将模型字段发送到前端,但将它们从动态表中排除?

iyr7buue

iyr7buue1#

我已经到了你的表。但是第二种方法看起来不错。对于像你这样的动态表,我也会这样做。
此外,您可以为表编写一个函数以获取正确的数据,例如:

@Input() pureData: any;

getTableData(data: any, toHide: any) {
  //toHide = ['id']
  const result = [];
  for (let _data of data) {
    const objectToAdd = {};
    for (let _key in _data) {
      if (!toHide.includes(_key) {
        objectToAdd[_key] = _data[_key];
      }
    }
  result.push(objectToAdd);
  }

  return result;
}

表格HTML

<table>
  <td *ngFor="let data of getTableData(pureData, ['id'])"></td>
</table>

相关问题