Angular Typescript 为 class 属性动态赋值

Question

I have a class and a json object I want the the items in the json object to update the new class. 使用 Angular 9

class

export class Searchdata{
  name:boolean=false;
  age:boolean=false;
  summer:boolean=false;
  winter:boolean=false;
  football:boolean=false;
  tennis:boolean=false;
}

和 json

[
   {
"name": "name",
"visible": true,
},
{
"name": "age",
"visible": true
}, {
"name": "football",
"visible": true
}

]

Json 并不总是具有与 class 具有属性相同数量的元素，但如果解决它更容易，它可以具有所有相同数量的项目。 我已经尝试了许多解决方案，因此出于说明目的，下面是我设想它的工作方式。

permPageData:any="The JsonObject";
tableSearchModel:Searchdata;

someFunction(){
this.tableSearchModel = new Searchdata();

permPageData.forEach(element => {
      if(element.name == this.tableSearchModel["element.name"])
        this.tableSearchModel[element.name] = element.visible;
}
return this.tableSearchModel;
}

Answer 1

我认为如果您要使用class来表示您的 model SearchData ，那么它应该是SearchData的一种方法。

像这样的东西，

.ts

class Searchdata{
  name = false;
  age = false;
  summer = false;
  winter = false;
  football = false;
  tennis = false;

  constructor() {}

  setFromJSON(obj: Array<{name:string,visible:boolean}>) {
    obj.forEach(element => {
      this[element.name] = element.visible;
    });
  }

  toString() {
    return `{name:${this.name},age:${this.age},summer:${this.summer},winter:${this.winter},football:${this.football},tennis:${this.tennis}}`;    
  }
}

const permPageData = [
  {
    "name": "name",
    "visible": true,
  },
  {
    "name": "age",
    "visible": true
  }, {
    "name": "football",
    "visible": true
  }
];

const tableSearchModel = new Searchdata();
console.log(tableSearchModel.toString());
tableSearchModel.setFromJSON(permPageData);
console.log(tableSearchModel.toString());

output

{name:false,age:false,summer:false,winter:false,football:false,tennis:false}
{name:true,age:true,summer:false,winter:false,football:true,tennis:false}

虽然这是完全不同的方法，但我发现interface很有趣。

.ts

interface Searchdata{
  name: boolean;
  age: boolean;
  summer: boolean;
  winter: boolean;
  football: boolean;
  tennis: boolean;
}

function searchDataNew(): Searchdata {
  return {
    name: false,
    age: false,
    summer: false,
    winter: false,
    football: false,
    tennis: false
  };
}

function searchDataToString(sd: Searchdata) {
  return `{name:${sd.name},age:${sd.age},summer:${sd.summer},winter:${sd.winter},football:${sd.football},tennis:${sd.tennis}}`;    
}

function arrayDataToObjData(arr: Array<{name:string,visible:boolean}>): Searchdata {
  const obj: any = {};
  arr.forEach(element => {
    obj[element.name] = element.visible;
  });
  return obj;
}

const permPageData = [
  {
    "name": "name",
    "visible": true,
  },
  {
    "name": "age",
    "visible": true
  }, {
    "name": "football",
    "visible": true
  }
];

const tableSearchModel: Searchdata = {
  ...searchDataNew(),
  ...arrayDataToObjData(permPageData2)
};
console.log(searchDataToString(tableSearchModel));

结果

{name:true,age:true,summer:false,winter:false,football:true,tennis:false}