我正在使用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});
但是我不想那样做,因为代码太冗长了。