How to add data to a specific user?

Question

Angular

There is a page with users, when you click on a user, a modal pops up, where I can write, for example, a comment for this user. How to me to make so that in a DB this comment was anchored to the certain user?
html

<app-header></app-header>
<section class="section-friends">
    <div class="container">
       <div class="main-page-wrap friends_main-page-wrap">
         <div class="friends_tabs-wrap fl-sb-c">
            <div (click)="friends = true; findFriends = false" class="friends_tab jc-f-c">
             <div class="friends_img">
                 <img src="/assets/img/header/friends.png" alt="">
             </div>
             <div class="friends_tab-text">
                <p>Friends</p>
            </div>
        </div>
        <div (click)="findFriends = true; friends = false " class="friends_tab">
            <input type="text" placeholder="find friends" class="inp" [(ngModel)]="friend.email">
        </div>
    </div>
    <section *ngIf="friends" class="section-friends">
        <div *ngIf="haveFriends" class="friends_has-friends">
            <div *ngFor="let id of us.data.friends; let i = index" class="friends_wrap">
                <div class="friends_logo jc-f-c">
                    <img (click)="showModalPaymentAdd()" src="{{us._users[id].avatarUrl}}" alt="friends-avatar">
                </div>
                <div class="friends_name">
                    <p>
                        {{us._users[id].email}}
                    </p>
                </div>
                <div class="friends_my-staff jc-f-r">
                    <div class="friends_money-wrap friends_wrap-item">
                        <div class="friends_money">
                            <!-- <p>
                                USD
                                <span>
                                    500
                                </span>
                            </p> -->
                        </div>
                    </div>
                    <!-- <div class="friends_staff-wrap friends_wrap-item">
                        <div class="friends_staff d-flex">
                            <div class="friends_staff-img">
                                <img src="/assets/img/profile/good.png" alt="">
                            </div>
                            <div class="friends_item">
                                <p>Camera</p>
                            </div>
                        </div>
                        <div class="friends_staff d-flex">
                            <div class="friends_staff-img">
                                <img src="/assets/img/profile/good.png" alt="">
                            </div>
                            <div class="friends_item">
                                <p>Camera</p>
                            </div>
                        </div>
                        <div class="friends_staff d-flex">
                            <div class="friends_staff-img">
                                <img src="/assets/img/profile/good.png" alt="">
                            </div>
                            <div class="friends_item">
                                <p>Camera</p>
                            </div>
                        </div>
                    </div> -->
                </div>
                <div class="friends_my-staff jc-f-r friends_unmy-staff">
                    <div class="friends_money-wrap friends_wrap-item">
                        <div *ngFor="let user of us.users | search:'5e4bf3c71bc5ba21d8f870a5':'_id'" class="friends_money friends_money--not-my">
                            <div>
                                <p *ngFor="let currency of user.data.payment.currency">
                                    {{currency}}
                                </p>
                            </div>
                            <div>
                                <span *ngFor="let money of user.data.payment.money">
                                    {{money}}
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="friends_staff-wrap friends_wrap-item">
                       <!--  <div class="friends_staff d-flex">
                            <div class="friends_staff-img">
                                <img src="/assets/img/profile/bad.png" alt="">
                            </div>
                            <div class="friends_item friends_item--not-my">
                                <p>Camera</p>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
        </div>
        <div *ngIf="!haveFriends" class="friends_no-friends">
           <div class="friends_no-friends-img">
               <img src="/assets/img/friends/noFriends.png" alt="">
           </div>
           <div class="friends_no-friends-text">
            <p>You have not friends</p>
        </div>
    </div>
</section>
<div *ngIf="findFriends">
    <section class="section-find-friends">
        <div class="find_friends-title jc-f-c">
            <div class="find_friends-img">
                <img src="/assets/img/friends/users.png" alt="">
            </div>
            <div class="find_friends-text">
                <p>USERS</p>
            </div>
        </div>
        <div *ngFor="let user of us.users|search:friend.email:'email'; let i = index" class="find_friends-users-list jc-f-c">
            <div  class="find_user-email friends_logo">
                <img src="{{user.avatarUrl}}">
            </div>
            <div class="find_user-name friends_name">
                <p>{{user.email}}</p>
            </div>
            <div class="find_friends-list-btn">
                <a class="btn" id="{{i}}" (click)="addFriend($event)">add +</a>
            </div>
        </div>
    </section>
</div>

</div>

</div>
</section>

ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { NgxIzitoastService } from 'ngx-izitoast';
import { Router } from '@angular/router';
import { UserService } from '../../services/user.service'

@Component({
  selector: 'app-friends',
  templateUrl: './friends.component.html',
  styleUrls: ['./friends.component.scss']
})
export class FriendsComponent implements OnInit {
  public haveFriends: boolean = false;
  constructor(private router: Router, private http: HttpClient, private alert: NgxIzitoastService, public us: UserService) {
    this.http.get('/api/user/me').subscribe((resp:any) =>{
      if(resp.data.friends.length != 0) this.haveFriends = true;
    })
    console.log(us.data);
  }
  public payment:any = {}
  public friends: boolean = true;
  public findFriends: boolean = false;
  public friend:any = {};

  addFriend(event) {
    if(this.us.data.friends.indexOf(this.us.users[event.target.id]._id) != -1) {
      console.log('user already your friend');
      // return;
    }
    this.us.data.friends.push(this.us.users[event.target.id]._id)
    this.us.update();
  }
  deleteFriend(event) {
    this.us.data.friends.splice(event.target.id, 1)
    this.us.update()
  }
  showModalPaymentAdd() {
    document.getElementById('modal-payment-add').style.display != 'block' ? document.getElementById('modal-payment-add').style.display = 'block' : document.getElementById('modal-payment-add').style.display = 'none'
  }
  createPayment() {
    if((document.getElementsByName('pay-rad')[0] as HTMLInputElement).checked) {
      this.us.data.payment.money.push(this.payment.money)
      this.us.data.payment.comment.push(this.payment.comment)
      this.us.data.payment.currency.push(document.querySelector('select').value)
      // this.us.data.payment.paymentItem = this.payment.item
      this.us.update()
    } else console.log(this.us.data.payment);
  }
  ngOnInit(): void {
  }

}

Now it shows this data on all users

Answer 1

Привязывайте модалку к id юзера, допустим data-id='34' и при записи комментария в бд, указывайте id нужного юзера, следом тяните этот комментарий по id