Как создать выпадающий список в Angular с Jhipster

Question

Я разрабатываю свое приложение, которое я сгенерировал с помощью jhipster. У меня есть две сущности, которые находятся во взаимоотношениях «многие ко многим»: первая - это «Статьи», а вторая - «Категории». Теперь я хочу создать выпадающий список, который позволит мне фильтровать по категориям, чтобы на странице отображались только статьи, принадлежащие к категории, выбранной из списка. Вот мой код, связанный с отображением статей на странице:

<div>
<h2 id="page-heading">
    <span>Articles</span>
    <button *jhiHasAnyAuthority="'ROLE_ADMIN'" id="jh-create-entity" class="btn btn-primary float-right jh-create-entity create-articles" [routerLink]="['/articles/new']">
        <fa-icon [icon]="'plus'"></fa-icon>
        <span class="hidden-sm-down" >
        Create a new Articles
        </span>
    </button>
</h2>
<jhi-alert-error></jhi-alert-error>
<jhi-alert></jhi-alert>

<div class="row">
    <div class="col-sm-12">
        <form name="searchForm" class="form-inline">
            <div class="input-group w-100 mt-3">
                <input type="text" class="form-control" [(ngModel)]="currentSearch" id="currentSearch" name="currentSearch" placeholder="Query">
                <button class="input-group-append btn btn-info" (click)="search(currentSearch)">
                    <fa-icon [icon]="'search'"></fa-icon>
                </button>
                <button class="input-group-append btn btn-danger" (click)="search('')" *ngIf="currentSearch">
                    <fa-icon [icon]="'trash-alt'"></fa-icon>
                </button>
            </div>
        </form>
    </div>
</div>
<br/>
<div class="alert alert-warning" *ngIf="articles?.length === 0">
    <span>No articles found</span>
</div>
<div class="table-responsive" *ngIf="articles?.length > 0">
    <table class="table table-striped" aria-describedby="page-heading">
        <thead>
        <tr jhiSort [(predicate)]="predicate" [(ascending)]="ascending" [callback]="loadPage.bind(this)">
        <th scope="col"  jhiSortBy="id"><span>ID</span> <fa-icon [icon]="'sort'"></fa-icon></th>
        <th scope="col"  jhiSortBy="name"><span>name</span> <fa-icon [icon]="'sort'"></fa-icon></th>
        <th scope="col"  jhiSortBy="issn"><span>Issn</span> <fa-icon [icon]="'sort'"></fa-icon></th>
        <th scope="col"  jhiSortBy="eissn"><span>Eissn</span> <fa-icon [icon]="'sort'"></fa-icon></th>
        <th scope="col"  jhiSortBy="name2"><span>name 2</span> <fa-icon [icon]="'sort'"></fa-icon></th>
        <th scope="col"  jhiSortBy="issn2"><span>Issn 2</span> <fa-icon [icon]="'sort'"></fa-icon></th>
        <th scope="col"  jhiSortBy="eissn2"><span>Eissn 2</span> <fa-icon [icon]="'sort'"></fa-icon></th>
        <th scope="col"  jhiSortBy="points"><span>points</span> <fa-icon [icon]="'sort'"></fa-icon></th>
        <th scope="col"  jhiSortBy="descr"><span>descr</span> <fa-icon [icon]="'sort'"></fa-icon></th>
        <th scope="col"></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let articles of articles ;trackBy: trackId">
            <td><a [routerLink]="['/articles', articles.id, 'view' ]">{{articles.id}}</a></td>
            <td>{{articles.name}}</td>
            <td>{{articles.issn}}</td>
            <td>{{articles.eissn}}</td>
            <td>{{articles.name2}}</td>
            <td>{{articles.issn2}}</td>
            <td>{{articles.eissn2}}</td>
            <td>{{articles.points}}</td>
            <td>{{articles.descr}}</td>
            <td class="text-right">
                <div class="btn-group">
                    <button type="submit"
                            [routerLink]="['/articles', articles.id, 'view' ]"
                            class="btn btn-info btn-sm">
                        <fa-icon [icon]="'eye'"></fa-icon>
                        <span class="d-none d-md-inline">View</span>
                    </button>
                    <button *jhiHasAnyAuthority="['ROLE_ADMIN','ROLE_POWERUSER']" type="submit"
                            [routerLink]="['/articles', articles.id, 'edit']"
                            class="btn btn-primary btn-sm">
                        <fa-icon [icon]="'pencil-alt'"></fa-icon>
                        <span class="d-none d-md-inline">Edit</span>
                    </button>
                    <button *jhiHasAnyAuthority="'ROLE_ADMIN'" type="submit" (click)="delete(articles)"
                            class="btn btn-danger btn-sm">
                        <fa-icon [icon]="'times'"></fa-icon>
                        <span class="d-none d-md-inline">Delete</span>
                    </button>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div *ngIf="articles?.length > 0">
    <div class="row justify-content-center">
        <jhi-item-count [page]="page" [total]="totalItems" [itemsPerPage]="itemsPerPage"></jhi-item-count>
    </div>
    <div class="row justify-content-center">
        <ngb-pagination [collectionSize]="totalItems" [(page)]="ngbPaginationPage" [pageSize]="itemsPerPage" [maxSize]="5" [rotate]="true" [boundaryLinks]="true" (pageChange)="loadPage($event)"></ngb-pagination>
    </div>
</div>

Я прилагаю скриншот, показывающий розовое место, в котором я хочу создать такой выпадающий список. Является ли это возможным? С чего начать создавать такой функционал?

Answer 1

Существует также модуль JHipster для PrimeFaces : https://www.npmjs.com/package/generator-jhipster-primeng, который обеспечивает не только раскрывающийся список с несколькими выборками, но и "самый полный набор пользовательских интерфейсов для Angular" .

Может быть, вы попробуете.

Answer 2

Вы можете сэкономить много времени, используя npms. Поэтому вы, скорее всего, либо ищете это:

https://www.npmjs.com/package/ng-multiselect-dropdown

или это:

https://material.angular.io/components/menu/api