Блог

мы создаем приложение, в котором список пользователей будет отображаться динамически с использованием компонента treeview, при нажатии на каждого пользователя будет отображаться новый компонент (app-user-profile-info), в котором администратор может выбрать элемент из списка элементов в выпадающем списке, как только элемент будет выбранв том же компоненте отображаются сведения, связанные с элементом. Пока все идет хорошо.

main-page.component.html

 <as-split-area size="75">
            <as-split direction="horizontal" restrictMove="true">
                <as-split-area size="18">
                    <p class="ml-3 mb-3 mt-3"><span class="e-underline">Tree View</span></p>
                    <tree [tree]="tree" (nodeSelected)="nodeSelected($event)"></tree>
                </as-split-area>
                <as-split-area size="82">
                    <app-main-component *ngIf="!viewProfile"></app-main-component>
                    <app-user-profile-info *ngIf="viewProfile"></app-user-profile-info>
                </as-split-area>
            </as-split>
 </as-split-area>
  

Существует только один компонент, который отображается при нажатии разными пользователями. В этом случае, когда я переключаюсь на следующего пользователя, компонент снова отображается с уже выбранными значениями, которые сбрасываются.

app-user-profile-info.component.html

 <div class="container-fluid">
 <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <ng-template #rt let-r="result" let-t="term">
                    {{ r.fileName}}
                </ng-template>
                <input type="search" class="form-control" #instance="ngbTypeahead" placeholder="Search"
                    aria-label="Search" [(ngModel)]="model"  [ngbTypeahead]="search" [resultTemplate]="rt"
                    [inputFormatter]="formatter" (focus)="focus$.next($event.target.value); displayData($event)"
                    (click)="click$.next($event.target.value)" (keyup)="displayData($event)">
                <small class="text-success">**please select an option in drop down**</small>
            </div>
        </div>
    </div>
    
    <div class="row mt-3">
      <div class="row">
        <div class="col">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Index</th>
                        <th>Date</th>
                        <th>HoursWorked</th>
                        <th>TotalWorkHours</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of streamData;">
                        <td><input type="checkbox" /></td>
                        <td>{{ data.index }}</td>
                        <td>{{ data.date }}</td>
                        <td>{{ data.HoursWorked || NA}}</td>
                        <td>{{ data.HoursWorked || NA}}</td>
                    </tr>   
                </tbody>
            </table>
        </div>
    </div>  
    
</div>
  

Может ли приведенный ниже сценарий быть достигнут в Angular.

1. Выберите пользователя A, затем отобразится компонент app-user-profile-info, затем выберите элемент в раскрывающемся списке, отобразятся сведения об элементах
2. Выберите пользователя B, затем выберите другой элемент в раскрывающемся списке.
3. Затем выберите пользователя A, возможно ли автоматически выбирать и отображать уже выбранный элемент в strep 1?

Спасибо, Мохан

Когда вы нажимаете на пользователя, вы полностью переходите к новому компоненту? если это так, я думаю, что решение, которое вы ищете, — это «mat-dialog» — https://material.angular.io/components/dialog/overview .

Вы можете открыть новый компонент во всплывающем диалоговом окне, ввести любые данные, которые вы хотите, и вернуть их текущему основному компоненту, а затем сохранить его. вам нужно будет сохранить выбранную вами переменную, здесь может быть полезен словарь.

• Существует способ передачи данных из одного компонента в другой (напрямую или путем сохранения их в локальном хранилище и загрузки), но я думаю, что это переусердствует и не требуется в вашем случае.