如何使用Jhipster在Angular中创建下拉列表

Question

我开发用jhipster生成的应用程序。我有两个存在多对多关系的实体-第一个是Articles，第二个是Categories。现在，我想创建一个下拉列表，使我可以按类别进行过滤-这样，只有属于从列表中选择的类别的文章才会显示在页面上。这是我的代码，用于在页面上显示文章：

<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

还有一个PrimeFaces：https://www.npmjs.com/package/generator-jhipster-primeng的JHipster模块，它不仅为您提供多选下拉菜单，而且是“用于Angular的最完整的用户界面套件”。

也许您可以尝试一下。

Answer 2

您可以使用npms节省很多时间。因此，您极有可能正在寻找这个：

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

或此：

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