Question

我正在使用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 个答案: