在嵌套数组中添加对象

Question

我正在处理 Angular 12 项目，我必须在其中添加和删除现有数据集中的数据。

我有一个门户对象，其中我有 PortalUser 数组，每个 PortalUser 对象都有一个密码数组（结构在下面的代码片段中）。

情况：我有在用户数组中添加用户和在用户密码数组中添加密码的按钮。

要求： 1. 当我单击“添加用户”时，它会在用户数组中添加一个用户（工作正常） 2. 当我在第一个用户中单击“添加密码”时（用户位于索引 0)，它应该只在索引 0 处的用户中添加密码（不工作）

问题： 当我在第一个用户（索引 0 处的用户，addPassword(0)）中单击“添加密码”时，它会向所有用户添加密码，而不管索引如何。

请查看下面的代码，帮助我找出我在这里遗漏的内容。

提前致谢。

HTML以下

<p>{{ portal | json }}</p>

<hr>
<hr>
<a (click)="addUsername()">Add User</a><br>

<hr>
<a (click)="addPassword(0)">Add Password in 1st user</a><br>

<hr>
<a (click)="addPassword(1)">Add Password in 2nd user</a><br>

TS以下

const emptyPassword = {
  "password": '',
  "id": 0
};

const emptyPortalUser = {
  "username": '',
  "id": 0,
  "passwords": [emptyPassword]
};

@Component({
  selector: 'logic-poc',
  templateUrl: './logic-poc.component.html',
  styleUrls: ['./logic-poc.component.css']
})
export class LogicPocComponent implements OnInit {

  constructor() { }

  portal = {
    "id": 0,
    "name": '',
    "users": [emptyPortalUser],
  };

  ngOnInit(): void {
    
  }

  addUsername() {
    this.portal.users.push(emptyPortalUser);
  }

  addPassword(ui: number){
    this.portal.users[ui].passwords.push(emptyPassword);    
  }

}

预期输出

{
   "id": 0,
   "name": "",
   "users": [
      {
         "username": "",
         "id": 0,
         "passwords": [
            {
               "password": "",
               "id": 0
            },
            {
               "password": "",
               "id": 0
            }
         ]
      },
      {
         "username": "",
         "id": 0,
         "passwords": [
            {
               "password": "",
               "id": 0
            }
         ]
      }
   ]
}

我得到的实际输出

{
   "id": 0,
   "name": "",
   "users": [
      {
         "username": "",
         "id": 0,
         "passwords": [
            {
               "password": "",
               "id": 0
            },
            {
               "password": "",
               "id": 0
            }
         ]
      },
      {
         "username": "",
         "id": 0,
         "passwords": [
            {
               "password": "",
               "id": 0
            },
            {
               "password": "",
               "id": 0
            }
         ]
      }
   ]
}

Answer 1

您将相同的用户对象推送到用户数组。您需要推送不同的用户实例。

接下来就是在addUsername()函数中，需要新建一个用户

在嵌套数组中添加对象

Adding object in nested array

typescript

angular12