Question

通过模式Angular过滤JSON提要的最佳方法是什么？我想这样做的原因是减少了使用传输状态API在html页面中存储的数据量。

理想的世界我想定义一个接口，并且只使用那些字段。但是接口仅在编译时使用，而不在运行时使用。

因此，目前已使用：

export const FieldWhitelist = {
  'slug': true,
  'title': true,
  'type': true,
};

get(url): Observable<any> {
    return this.http.get(url).pipe(
      map(items => {
        if (typeof items === 'object') {
          Object.keys(items).forEach(field => {
            if (!FieldWhitelist[field]) {
              delete items[field];
            }
          });
        } else if (typeof items === 'array') {
          Object.keys(items).forEach(item => {
            Object.keys(items[item]).forEach(field => {
              if (!FieldWhitelist[field]) {
                delete items[item][field];
              }
            });
          });
        }
        return items;
      })
    );
}

这将变成json供稿：

{
  'id': '12x324jh34',
  'metadata': 'sajhjksadhjkdsa'
  'slug': 'home',
  'title': 'Homepage',
  'type': 'page',
}

对此：

{
  'slug': 'home',
  'title': 'Homepage',
  'type': 'page',
}

是否有更好的方法来递归过滤json提要以匹配模式？

Answer 1

您可以定义一个类并在其中映射items，返回该类

const obj = {
  'id': '12x324jh34',
  'metadata': 'sajhjksadhjkdsa',
  'slug': 'home',
  'title': 'Homepage',
  'type': 'page',
}; 

class Data {
  slug: string;
  title: string;
  type: string;

  constructor({slug, title, type}: {slug: string, title: string, type: string}) {
    this.slug = slug;
    this.title = title;
    this.type = type;
  }
}

console.log(new Data(obj));

还要确保知道items在这里，您不必检查它是数组还是对象恕我直言，这应该从返回部分中清楚了解

 map(items => {

Answer 2

使用deserialize.ts帮助程序类找到了另一种方法，该类使用Reflect Metadata存储属性：

import 'reflect-metadata';

const CUSTOM_PROPS = 'custom:properties';

export function Expose(target: any, key: string) {
  const properties = Reflect.getMetadata(CUSTOM_PROPS, target) || [];
  properties.push(key);
  Reflect.defineMetadata(CUSTOM_PROPS, properties, target);
}

export class Deserializable {
  deserialize(input: object): this {
    const properties = Reflect.getMetadata(CUSTOM_PROPS, this);
    properties.forEach(key => {
      this[key] = input[key];
    });
    return this;
  }
}

用于模型：

import { Expose, Deserializable } from './deserialize';

export class Brand extends Deserializable {
  @Expose name: string;
  @Expose image: string;
  @Expose link: string;
}

角度过滤器对象

2 个答案: