angular - 在 angular5 中发送基于选定用户的表单数据

Question

我对多种类型的用户数据使用通用的反应形式。就像一些用户有额外的数据，比如老师、学生、警卫等。从下拉列表中选择表格

我想根据选定的用户发送特定的数据对象。我创建了一个名为“用户”的模型，其中包含所有常见和差异字段。现在我想发送如下数据

 selectedUser:string; //form selected like teacher etc   
 submit(data){
   if(selectedUser === 'Teacher'){
     let techobj =new User(data.name,data.address,data.degree);
        this.userservice.post(url,teachobj);
        }
   if(selectedUser === 'Student'){
     let stuobj =new User(data.name,data.address,data.semester);
       this.userservice.post(url,stuobj);  
      }
    ..... so on
}

模型类

export class User{
    //all fields here

     constructor(name :string,address:string,semester ?:string ,degree?:string)
}

问题 无法重载构造函数或使用 Java 或 C# 等差异参数创建对象

标签： angularformstypescript

Answer 1

您可以创建一个具有强制和可选属性的接口，在特殊情况下需要传递这些属性，如下所示

export interface IUser{
  name: string;
  address: string;
  semester?: string,
  degree?: string
}

此处姓名，地址是每个案例的必填项，但学期和学位可以根据条件通过。

您可以在User类的构造函数中使用此接口，如下所示来设置属性的值。

export class User{
    //all fields here
  public name: string;
  public address: string;
  public semester?: string;
  public degree?: string;

  constructor(user:IUser) {
    this.name = user.name;
    this.address = user.address;
    this.semester = user.semester;
    this.degree = user.degree;
  }

}

最后，您可以像以下方法一样创建类的实例 -

let data2:IUser = { name: data.name, address: data.address, degree: data.degree};
let techobj = new User(data2);

或者你可以这样做

let techobj2 = new User({ name: data.name, address: data.address, degree: data.degree});

同样，Student您可以像这样创建实例 -

let techobj3 = new User({ name: data.name, address: data.address, semester:data.semester });

这是完整的代码 -

export interface IUser{
  name: string;
  address: string;
  semester?: string,
  degree?: string
}

 export class User{
    //all fields here
  public name: string;
  public address: string;
  public semester?: string;
  public degree?: string;

  constructor(user:IUser) {
    this.name = user.name;
    this.address = user.address;
    this.semester = user.semester;
    this.degree = user.degree;
  }

}

let data:IUser = { name: "Niladri", address: "123", degree: "GRAD" };
let techobj = new User(data);

///OR 
let techobj2 = new User({ name: "Niladri", address: "123", degree: "GRAD" });

//Similary 

let techobj3 = new User({ name: "Niladri", address: "123", semester:"6th" });

console.log(techobj2.degree); //GRAD
console.log(techobj3.semester); //6th

你的服务电话应该是这样的 -

selectedUser:string; //form selected like teacher etc   
 submit(data){
   if(selectedUser === 'Teacher'){
     let techobj =new User({ name: data.name, address: data.address, degree: data.degree});
        this.userservice.post(url,teachobj);
        }
   if(selectedUser === 'Student'){
     let stuobj =new User({ name: data.name, address: data.address, semester:data.semester });
       this.userservice.post(url,stuobj);  
      }
    ..... so on
}

PS - 如果您在当前构造函数中为不需要的参数传递 null ，那么它也可以工作

编辑2：另一种方法是创建一个基类User并从该类继承创建Student和Teacher类，然后调用super()子类的构造函数将name,address属性值传递给基User类。但是这种情况下会有很多子类取决于 if 条件的数量

工作演示：

关联