@ArthurHlushko

Как добавлять данные к определенному юзеру?

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

}


Сейчас оно эти данные показывает на всех юзерах
5e5635b7a5107126563772.png
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
HistoryART
@HistoryART
Молодой и дерзкий
Привязывайте модалку к id юзера, допустим data-id='34' и при записи комментария в бд, указывайте id нужного юзера, следом тяните этот комментарий по id
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы