Есть страница с пользователями, при клике на пользователя выскакивает модалка, где я могу написать например комментарий для этого пользователя. Как мне сделать так, чтобы в БД этот комментарий привязывался к определенному юзеру?
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 {
}
}
Сейчас оно эти данные показывает на всех юзерах
Средний
