Итак, у меня есть страница. На странице есть набор карточек, которые отображают данные, поступающие из API. На этой же странице есть боковая панель.
У каждой карты есть название и цена события.
То, чего я хочу достичь, это:
при нажатии на карточку название события и цена должны быть выделены на боковой панели.
Начальное состояние боковой панели также будет пустым.
Это будет работать как тумблер, поэтому, когда это Speci c карта не нажата, данные будут исчезать с приборной панели.
Вот мой html файл:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<ng-container >
<div class="row">
<div
class="card col-6 m-3"
*ngFor="let ticket of ticketDetails; let index = index"
(click)="displayDetailsOfCurentItem(ticket)"
style="box-shadow: blue"
>
<h5 class="card-header">{{ticket.category_name}}</h5>
<div class="card-body">
<h5 class="card-title">{{ ticket.counterPrice || ticket.price}}</h5>
<p class="card-text">{{ticket.description}}</p>
<div class="badge badge-light">{{ticket.counter || 1}}</div>
<br>
<br>
<br>
<a
(click)="activateClassMinus(index)"
class="btn btn-primary">-</a>
<a
(click)="activateClassAdd(index)"
class="btn btn-primary"
style="float: right">+</a>
</div>
</div>
<!-- Side Bar Section Starts-->
<div class="card col-5 mb-5" >
<p>Side Bar </p>
<p class="ml-3">Event <span class="ml-4"> Price</span> </p>
<div>
<div class="d-flex" *ngFor="let ticket of ticketDetails;">
<span> x </span>
<p class="ml-2">{{ticket.category_name}}</p>
<p class="ml-2"> {{ ticket.counterPrice || ticket.price}} </p>
</div>
</div>
<br>
<div class="m-5">
Total:{{ ticket.counterPrice || ticket.price }} </div>
</div>
<!-- Side Bar Section Ends-->
</div>
</ng-container>
<body>
</body>
</html>
И тс file:
import { Component, OnInit } from '@angular/core';
import {Router, ActivatedRoute, Params} from '@angular/router';
import { PaymentService } from "../service/pay.service";
@Component({
selector: 'app-buy-a-ticket',
templateUrl: './buy.component.html',
// styleUrls: ['./buy.component.css']
})
export class BuyATicketComponent implements OnInit {
ticketId
ticket = true
information = false
payment = false
eventId;
ticketDetails;
log: number = 1;
quantities = {};
constructor(
private activatedRoute: ActivatedRoute,
private paymentService: PaymentService)
{ }
ngOnInit(): void {
this.getOpenEventTicket()
}
getOpenEventTicket(){
var id = "RwgnUvDpEicFA5pWFMiB"
const eventId = this.eventId
this.paymentService.getOpenTicketCategory(id).subscribe( (res:any) => {
this.ticketDetails = res;
console.log("details",res)
})
}
displayDetailsOfCurentItem(ticket){
console.log("The Ticket Cat Id", ticket)
}
activateClassAdd(index){
const selectedTic = this.ticketDetails[index]
if(selectedTic.counter) {
selectedTic.counter++;
const newPrice = selectedTic.price * selectedTic.counter;
selectedTic.counterPrice = newPrice
} else {
selectedTic.counter = 1
}
}
activateClassMinus(index){
const selectedTic = this.ticketDetails[index]
if(selectedTic.counter && selectedTic.counter >= 1) {
selectedTic.counter--;
const newPrice = selectedTic.price * selectedTic.counter;
selectedTic.counterPrice = newPrice
} else {
// selectedTic.counter = 0
}
}
}
Вот ссылка на стекаблиц:
https://stackblitz.com/edit/angular-vg7j9i?file=src%2Fapp%2Fbuy%2Fbuy.component.ts