如何使用 Angular 8 顯示隱藏多個 div

Question

我想在 Angular 8 中使用 JS 顯示和隱藏多個 div。下面的代碼在 HTML 模擬中運行良好，但在 Angular 中運行良好。 當我單擊 btn 時，在下面給出的腳本中顯示

未捕獲的 ReferenceError：未定義 divVisibility

我可以使用這個 JavaScript 嗎？ 還是只能通過 typescript 實現？

組件 HTML

<div class="row">
    <div class="col-sm-3">
        <a
            href="#"
            class="card"
            id="btnMoving"
            onclick="divVisibility('IdMoving');"
        >
            <div class="card-body text-center dashboard-moving-banner">
                <i class="simple-icon-control-forward text-white"></i>
                <p class="lead text-center text-white">18</p>
                <p class="card-text mb-0 text-white">Moving</p>
            </div>
        </a>
    </div>
</div>

ANGULAR

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

@Component({
    selector: "app-dashboard2",
    templateUrl: "./dashboard2.component.html",
    styleUrls: ["./dashboard2.component.scss"],
})
export class Dashboard2Component implements OnInit {
    constructor() {}

    ngOnInit(): void {
        var divs = ["IdMoving", "IdIdle", "IdRange", "IdStops"];
        var visibleDivId = null;
        function divVisibility(divId) {
            if (visibleDivId === divId) {
                visibleDivId = null;
            } else {
                visibleDivId = divId;
            }
            hideNonVisibleDivs();
        }

        function hideNonVisibleDivs() {
            var i, divId, div;
            for (i = 0; i < divs.length; i++) {
                divId = divs[i];
                div = document.getElementById(divId);
                if (visibleDivId === divId) {
                    div.style.display = "block";
                } else {
                    div.style.display = "none";
                }
            }
        }
    }
}

Answer 1

您沒有正確使用 Angular。 使用NgClass進行隱藏/顯示，或ElementRef https://angular.io/api/core/ElementRef但這是最后的手段。 如果您是 Angular 的新手，請嘗試做英雄教程，您將學習如何做這些事情。