#angular
#angular
Вопрос:
мы создаем приложение, в котором список пользователей будет отображаться динамически с использованием компонента 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.
- Выберите пользователя A, затем отобразится компонент app-user-profile-info, затем выберите элемент в раскрывающемся списке, отобразятся сведения об элементах
- Выберите пользователя B, затем выберите другой элемент в раскрывающемся списке.
- Затем выберите пользователя A, возможно ли автоматически выбирать и отображать уже выбранный элемент в strep 1?
Спасибо, Мохан
Ответ №1:
Когда вы нажимаете на пользователя, вы полностью переходите к новому компоненту? если это так, я думаю, что решение, которое вы ищете, — это «mat-dialog» — https://material.angular.io/components/dialog/overview .
Вы можете открыть новый компонент во всплывающем диалоговом окне, ввести любые данные, которые вы хотите, и вернуть их текущему основному компоненту, а затем сохранить его. вам нужно будет сохранить выбранную вами переменную, здесь может быть полезен словарь.
- Существует способ передачи данных из одного компонента в другой (напрямую или путем сохранения их в локальном хранилище и загрузки), но я думаю, что это переусердствует и не требуется в вашем случае.