如何在组件函数内部动态生成用户定义的类对象

时间:2019-06-17 12:38:39

标签: javascript angular

我正在使用Angular设计具有嵌套组件的页面。父组件充当容器,子组件本质上是显示用户信息(用户名,ID,地址等)的席卡。我想直接通过单击父组件中的按钮(调用GenerateUser()函数)直接生成子组件。

我已经用必填字段(用户名,ID,地址等)创建了一个类(UserDetails)。我使用UserDetail对象数组在父组件内部动态生成子组件(html只是在数组上循环以使用@Input生成子组件)。每次单击“生成按钮”都会将UserDetail对象推到UserDetail数组上。目前,我有一个使用“ new”创建的UserDetail对象,并将同一对象推到数组中。所有子组件都具有相同的值也就不足为奇了。

我想为每个新用户创建一个独立的/新的UserDetail对象,初始化id值并将该对象传递给正在创建的新子组件。如何在GenereteUser()函数中动态生成UserDetails对象? parent-component.ts如下:

import { UserDetail } from 'src/app/models/UserDetail';

@Component({
  selector: 'app-user-parent',
  templateUrl: './user-parent.component.html',
  styleUrls: ['./user-parent.component.scss']
})
export class UserParentComponent implements OnInit {

  addUsers: UserDetail [] = [];
  newUser: UserDetail = new UserDetail();

  private addTracker: number;   // no. of additions

  constructor() { }

  ngOnInit() {
    this.addTracker = 0;
    this.newUser.id = this.addTracker;
    this.addUsers.push(this.newUser);
  }

  GenerateUser(): void {
    this.addTracker += 1;
    this.newUser.id = this.addTracker;
    this.addUsers.push(this.newUser);
  }

}

如上所述,在GenerateUser()函数中,我想生成一个新的UserDetail对象,但是Angular不允许我在GenerateUser()函数中使用“ new UserDetail()”。

有没有一种方法可以在GenerateUser()中动态生成一个新对象?

我知道我可以使用

this.addUsers.push({name: xxx, id: this.addTracker, address: yyy}); 

但是我不想那样做,因为代码太冗长了。

0 个答案:

没有答案