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

juzqafwq 于 2023-02-26 发布在 Angular

关注(0)|答案(1)|浏览(291)

我有一些视图模型，我从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 Value和bool 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，在那里我可以使用它来个性化表中的标题，而不使用数据注解，但我仍然想知道是否有第三个更好的选项将模型字段发送到前端，但将它们从动态表中排除？

JSON

来源：https://stackoverflow.com/questions/75519301/return-model-to-angular-but-do-not-show-all-fields-in-dynamic-table

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-02-26

我来回答

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

1条答案

相关问题

热门标签

最新问答