Блог

Я работаю над проектом Angular 12, в котором мне нужно добавлять и удалять данные из существующего набора данных.

У меня есть объект портала, в котором у меня есть массив пользователей портала, и каждый объект пользователя портала имеет массив паролей (структура приведена ниже фрагмента кода).

Ситуация: У меня есть кнопки для добавления пользователя в массив пользователей и добавления пароля в массив паролей пользователя.

Требование: 1. Когда я нажимаю Добавить пользователя, он добавляет пользователя в массив пользователей (работает нормально) 2. Когда я нажимаю Добавить пароль у 1-го пользователя (пользователь с индексом 0), он должен добавить пароль только у пользователя с индексом 0 (Не работает)

Проблема: Когда я нажимаю Добавить пароль у 1-го пользователя (пользователь с индексом 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);    
  }

}
 

Expected Output

 {
   "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
            }
         ]
      }
   ]
}
 

Вы помещаете один и тот же объект пользователя в массив пользователей. Вам нужно нажимать разные экземпляры пользователей.

Из этого следует, что в функции addUsername() необходимо создать нового пользователя.