将模型返回到角度，但不显示动态表中的所有字段答案

【问题标题】：Return model to angular, but do not show all fields in dynamic table将模型返回到角度，但不显示动态表中的所有字段
【发布时间】：2023-02-21 19:14:05
【问题描述】：

我有一些从 API 获得的 ViewModel，这些模型应该显示在 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 中进行过滤，如果键是 ID，则跳过该字段。但是，将来可能会有更多字段需要发送到 Angular，并且它们不应显示在表中。

我想到了两种解决方案，一种是再做一个List作为响应，其中包含应该跳过的字段名称，例如：

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

}

另一个解决方案是创建一些具有两个属性的TablePropertyClass，object Value和bool ShownInTable，然后映射我的视图模型，所以最后我得到了这个：

    {
   "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，我可以在不使用数据注释的情况下使用它来个性化表中的标题，但我仍然想知道是否有第三个更好的选项来将模型字段发送到前端，但将它们从动态表中排除？

【问题讨论】：

你不能通过 Html 隐藏 Id 吗？
如果我为每个模型创建表，我可以。但是我有像 Hunter、Board、Report、User、Place 这样的表格，它们没有与 Country 相同的列，我想为表格制作一个 html 组件，无论发送哪个模型

标签： asp.net json angular

【解决方案1】：

我是你的表。但第二种方式看起来不错。对于像您这样的动态表，我也会这样做。

此外，您可以为表编写一个函数来获取正确的数据，例如：

@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>

【讨论】：