Всякий раз, когда по ссылке щелкают контент, к ngcontainer этой ссылки должен переходить модальный, но как это сделать с несколькими ngcontainers? - PullRequest
Новая
       25

Всякий раз, когда по ссылке щелкают контент, к ngcontainer этой ссылки должен переходить модальный, но как это сделать с несколькими ngcontainers?

1 голос
/ 02 мая 2020

У меня есть модал, и внутри него у меня есть степпер, который связан с некоторыми ссылками. Я хочу, чтобы каждый раз, когда человек нажимал на ссылку, должно отображаться содержимое этой ссылки, которое определено внутри ngcontainers, у каждой ссылки есть содержание их и когда нажата их соответствующая ссылка, содержимое этого ngcontainer должно отображаться только! Вот что я делаю сейчас, но как мне изменить ngIf в первом родительском ngcontainer, когда у меня будет несколько ngcontainer для ссылок? 

<div>
<div class="modal-header lead">
    Generate Reports
</div>
<div>
    <ul class="timeline w-75">
        <li class="bg-info">
            <div class="timeline-item">
                <span class="timeline-icon material-icons text-info">brightness_1</span>
                <span class="text-dark">Select Report</span>
            </div>
        </li>
        <li [ngClass]="isSecondStep?'bg-info':'bg-secondary'">
            <div class="timeline-item">
                <span class="timeline-icon material-icons"
                [ngClass]="isSecondStep?'text-info':'text-secondary'">brightness_1</span>
                <span class="text-dark">Generate Report</span>
            </div>
        </li>
    </ul>
</div>
<ng-container *ngIf="!isSecondStep">
        <div>
            <h4><a (click)="isSecondStep=!isSecondStep" class="text-link text-main">Head/Approver Report</a></h4>
            <a>A report containing list of all departments along with it's heads and approvers.</a>
            </div><br>
        <div>
            <h4><a href="#" class="text-link text-main">Student Dues Application Status Report</a></h4>
            <a>A report containing list of all departments along with it's head and approvers.</a>
        </div><br>
        <div>
            <h4><a href="#" class="text-link text-main">Student Details Report</a></h4>
            <a>A report containing all relevant details pertaining to students registers in this institute for the current</a>
        </div><br>
        <div>
            <h4><a href="#" class="text-link text-main">Staff/Faculty Details Report</a></h4>
            <a>A report containing all relevant details pertaining to staff/Faculty of your institute.</a>
        </div><br>
        <div>
            <h4><a href="#" class="text-link text-main">Dues Details Report</a></h4>
            <a>A report containing the details related to total accumulated dues.</a>
        </div><br>    
</ng-container>

<ng-container *ngIf="isSecondStep">
        <div>
            <h4><a class="text-main">Head/Approver Report</a></h4>
        </div><br>
        <div class="text-left">
            <label class="mt-1">Scope</label>
            <div class="row">
                <div class="col-sm-6 radio">
                        <label class="text-secondary vertical-center">
                        <input type="radio" class="mr-1" name="scope">Institute</label>
                    </div>
                    <div class="col-sm-6 radio">
                        <label class="text-secondary vertical-center">
                        <input type="radio" class="mr-1" name="scope" checked>Department</label>
                    </div>
                </div>
        </div><br>
        <div>
            <label class="mt-1 text-left">Department</label><br>
            <select>
                <option [ngValue]="null">Select Department</option>
                <option [ngValue]="dept.id" *ngFor="let dept of departments">{{dept.name}}</option>
            </select>
        </div><br>
        <div class="d-flex justify-content-around">
            <div class="p-4">
                <span class="material-icons text-main">get_app</span>
                <div class="text-link text-main text-left">Download</div>
            </div>
            <div class="p-4">
                <span class="material-icons text-main">print</span>
                <div class="text-link text-main text-left">Print</div>
            </div>
            <div class="p-4">
                <span class="material-icons text-main">clear</span>
                <div class="text-link text-main text-left">Close</div>
            </div>
        </div>
</ng-container>
</div>
...