Блог

Я получил список пользователей, которые я получаю от службы.

 persons: Array<any> = [
{"id": 1, "name": "test1", "key": "value"}, 
{"id": 2, "name": "test2", "key": "value"}, 
{"id": 3, "name": "test3", "key": "value"},
{"id": 4, "name": "test4", "key": "value"},
{"id": 5, "name": "test5", "key": "value"}
....
]
 

Я создаю таблицу в своем html следующим образом:

 <div *ngFor="let person of persons; let i = index">
<p>{{person.id}}</p>
<p>{{person.name}}</p>
<p>{{person.key}}</p>
<button (click)="onSelect(person)">Select</button>
</div>
 

Все это работает идеально

Теперь я хочу, чтобы пользователь мог выбирать нужных ему людей и добавлять их в новый список / таблицу, которые будут отображаться асинхронно в верхней части страницы, а также дать ему возможность удалить человека из этого списка, если он захочет.

Для этого мне, вероятно, нужен второй массив (ReplaySubject? ), на который я должен подписаться и отобразить его в DOM, например

 <div *ngIf="new Array / ReplaySubject is length is > 0" *ngFor="let person of selectedPersons; let i = index">
<p>{{person.id}}</p>
<p>{{person.name}}</p>
<p>{{person.key}}</p>
<button (click)="removePerson(person)">X</button>
</div>
 

Но как именно я могу этого добиться?
Я создал ReplaySubject, подписался на него в ngOnInit и при вызове функции onSelect(value) я делаю это.ReplaySubject.emit(value) но я не знаю, как прочитать значения этого ReplaySubject.

В конце я хочу отправить все данные, которые включены в новый массив / тему выбранных лиц. Вот так:

 <button type="button" (click)="onSubmit()">Submit</button>

--

onSubmit() {
// Data from the new Array / Subject
}
 

Может быть, это неправильный подход? Есть ли какие-либо предложения?