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

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

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

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

或者这个：

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

Answer 2

还有一个用于 PrimeFaces: https://www.npmjs.com/package/generator-jhipster-primeng 的 JHipster 模块，它不仅为您提供多选下拉菜单，而且 "the most complete user interface suite for Angular"。

也许你会试一试。

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

How to create dropdown list in Angular with Jhipster

spring-boot

jhipster

angular