Как динамически создать пользовательский объект класса внутри функции компонента

Question

Я использую Angular для разработки страницы, которая имеет вложенные компоненты.Родительский компонент действует как контейнер, а дочерние компоненты - это по существу мат-карты, отображающие информацию о пользователе (имя пользователя, идентификатор, адрес и т. Д.).Я хочу создать дочерние компоненты напрямую, нажав кнопку в родительском компоненте (который вызывает функцию GenerateUser ()).

Я создал класс (UserDetails) с необходимыми полями (имя пользователя, идентификатор,адрес и т. д.).Я генерирую дочерние компоненты динамически внутри родительского компонента, используя массив объектов UserDetail (html просто зацикливается на массиве, чтобы генерировать дочерние компоненты, используя @Input).При каждом нажатии кнопки «Создать» объект UserDetail помещается в массив UserDetail.На данный момент у меня есть один объект UserDetail, созданный с использованием «new», и помещаю этот же объект в массив.Неудивительно, что все дочерние компоненты получают одно и то же значение.

Для каждого нового пользователя я хотел бы создать независимый / новый объект UserDetail, инициализировать значение id и передать объект новому создаваемому дочернему компоненту.,Как я могу динамически генерировать объекты UserDetails в функции GenereteUser ()?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 не позволяет мне использовать «newUserDetail () "внутри функции GenerateUser ().

Есть ли способ динамически генерировать новый объект внутри GenerateUser ()?

Я знаю, что могу использовать

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

но я не хочу идти по этому пути, поскольку код становится слишком многословным.