javascript - Angular :样式或类绑定(bind)，座位图

我正在为我的研究生学习而努力。我需要在Angular中最多选择9个座位来制作交互式座位图。看完我以前的类(class)后，我可以用JS做一些魔术，但是没有最大选择(链接到下面的codepen)。

HTML代码包含巨大的SVG图形-您可以在下面的Codepen中找到它

的CSS

.occupied {
    fill: red;
}

.free {
    fill: #afafaf;
}

Java脚本

const buttonArray = document.querySelectorAll("#seats path");
console.log("query", typeof buttonArray);


var myArray = Array.from(buttonArray);
console.log(myArray);

for (let i = 0; i < myArray.length; i++) {
    myArray[i].setAttribute("id", `seat_${i + 1}`);

    document.getElementById(`seat_${i + 1}`).addEventListener("click", function() {
        if (document.getElementById(this.id).getAttribute("class") == "occupied") {
            document.getElementById(this.id).removeAttribute("style");
            document.getElementById(this.id).setAttribute("class", "free");
        } else {
            document.getElementById(this.id).removeAttribute("style");
            document.getElementById(this.id).setAttribute("class", "occupied");
        }
    });
}

Codepen

我不知道如何在Angular中实现它，或者甚至使其更简单。
当然，如何最大程度地选择9个席位。

您的任何建议和帮助，我将不胜感激。

Stackblitz

最佳答案

您可以将onClick函数添加到path = seats

<g id="seats"  (click)="onClick($event)">

然后使用closest方法获得就座，该位置被单击。在您的示例中，所有座位路径都具有st121类。这意味着我们可以使用$event.target.closest('.st121');入座

要获得最大席位，您可以添加一个柜台并加以注意。

import {
    Component,
    OnInit
} from '@angular/core';

const MAX_SEATS = 9;
@Component({
    selector: 'app-seatmap',
    templateUrl: './seatmap.component.html',
    styleUrls: ['./seatmap.component.css']
})
export class SeatmapComponent implements OnInit {
    constructor() {}
    ngOnInit() {}

    counter = 0;

    onClick($event) {
        const seat = $event.target.closest('.st121');
        if (!seat) {
            return;
        }

        const res = seat.getAttribute("class").split(' ').indexOf('occupied');

        if (res > -1) {
            seat.removeAttribute("style");
            seat.setAttribute("class", "free st121");
            this.counter -= 1;
        } else if (this.counter < MAX_SEATS) {
            seat.removeAttribute("style");
            seat.setAttribute("class", "occupied st121");
            this.counter += 1;
        }


    }

}

关于javascript - Angular :样式或类绑定(bind)，座位图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62397700/