angular 5将模态类中的表单数据保存在数组中并在表格中显示

Question

我想将表单数据保存在模型类中并在表格中显示。 一旦提交表格。我通过 this.user.addOject() 方法将数据推送到类中。但数组总是只显示最后提交的表单值。

在 sajeet 提到的编辑之后：我得到了 StaticInjectorError

this.user.getUsers(); 数组数据仅显示最后提交的表单数据。 {userid: 1, firstName: "ffrere", lastName: "trtr", mobile: "355667676878", accsprofile: Array(1)}

这是我的模型类

export interface IUser {
    userid: number;
    firstName: string;
    lastName: string;
    mobile: string;
    accsprofile: string[];
}
@Injectable()
export class UserService {
    user: IUser;
    userlist: Array<object> = [];

    constructor() {}

    addOject(): void {
       this.user = user;
       this.userlist.push(this.user);
     }

    getUsers(): any {
        return this.userlist;
    }
}

UserDialogue.component.ts

export class UserdialogueComponent implements OnInit {

  userList: IUser[];      
  user: Usermodel;

  constructor(private dialog: MatDialog, private user: UserService) { }

  ngOnInit() {
  }
  openDialog() {

    const dialogConfig = new MatDialogConfig(); 
    const dialogRef = this.dialog.open(UserformComponent, dialogConfig);

    dialogRef.afterClosed().subscribe(result => {    
      const userData = {
        userid: result.data.userid,
        firstName: result.data.userid,
        lastName: result.data.userid,
        mobile: result.data.userid,
        accsprofile: result.data.userid
      };           
      this.user.addOject(userData);         
      console.log(this.user.getUsers()); // always showing last inserted record.         
    });
  }
}

数组只显示最后输入的表单数据。

Answer 1

你应该使用服务而不是类，

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class userService {
  user: IUser;
  userlist: Array<object> = [];

  constructor(user: IUser) {

   }

    addOject(): void {
       this.userlist.push(this.user);
     }

    getUsers(): any {
        return this.userlist;
    }

}

并在你的组件中注入这个特定的服务，休息应该可以正常工作