2

我正在使用最新版本的 JHipster 开发一个应用程序，我试图通过使用来自https://github.com/ng-select/ng-select{<ng-select>}的模块来显示多选下拉列表。但它不显示。这是下面的代码。我的 app.module.ts 文件：

import { FormsModule } from '@angular/forms';
import { NgSelectModule } from '@ng-select/ng-select';
// jhipster-needle-angular-add-module-import JHipster will add new module  here
import { JhiMainComponent, NavbarComponent, FooterComponent, PageRibbonComponent, ActiveMenuDirective, ErrorComponent } from './layouts';

@NgModule({
imports: [
    BrowserModule,
    NgSelectModule,
    FormsModule,
    MyAppAppRoutingModule,
    Ng2Webstorage.forRoot({ prefix: 'jhi', separator: '-' }),
    MyAppSharedModule,
    MyAppCoreModule,
    MyAppHomeModule,
    MyAppAccountModule,
    // jhipster-needle-angular-add-module JHipster will add new module here
    MyAppEntityModule
],
declarations: [JhiMainComponent, NavbarComponent, ErrorComponent, PageRibbonComponent, ActiveMenuDirective, FooterComponent],
providers: [
    -----------
],
bootstrap: [JhiMainComponent]
})
...........

数据服务：

export interface Person {
id: string;
isActive: boolean;
age: number;
name: string;
gender: string;
company: string;
email: string;
phone: string;
disabled?: boolean;
}
@Injectable({ providedIn: 'root' })
export class DataService {
   .......

constructor(private http: HttpClient) {}
........

getPeople(term: string = null): Observable<Person[]> {
    let items = getMockPeople();
    if (term) {
        items = items.filter(x => x.name.toLocaleLowerCase().indexOf(term.toLocaleLowerCase()) > -1);
    }
    return of(items).pipe(delay(500));
}

}

function getMockPeople() {
return [
    {
        'id': '5a15b13c36e7a7f00cf0d7cb',
        'index': 2,
        'isActive': true,
        'picture': 'http://placehold.it/32x32',
        'age': 23,
        'name': 'Karyn Wright',
        'gender': 'female',
        'company': 'ZOLAR',
        'email': 'karynwright@zolar.com',
        'phone': '+1 (851) 583-2547'
    },
    {
        'id': '5a15b13c2340978ec3d2c0ea',
        'index': 3,
        'isActive': false,
        'picture': 'http://placehold.it/32x32',
        'age': 35,
        'name': 'Rochelle Estes',
        'disabled': true,
        'gender': 'female',
        'company': 'EXTRAWEAR',
        'email': 'rochelleestes@extrawear.com',
        'phone': '+1 (849) 408-2029'
    }
];
}

人员组件：

    export class PeopleUpdateComponent implements OnInit {
    people$3: Observable<any[]>;
    selectedPeople3 = [];

    constructor(
        private jhiAlertService: JhiAlertService,
        private dataService: DataService,
        private activatedRoute: ActivatedRoute
    ) {}

    ngOnInit() {
        this.isSaving = false;
        this.people$3 = this.dataService.getPeople();
    }
}

我的html代码是：

<ng-select
                [items]="people$3 | async"
                bindLabel="name"
                [multiple]="true"
                [disabled]="disable"
                [(ngModel)]="selectedPeople3">
            </ng-select>

任何帮助表示赞赏

4

1 回答 1

0

我和你有同样的问题，我解决了。

这不是与 . 相关的问题<ng-select>，而是与您要使用的任何库相关的问题。
为了能够添加任何第三方库，您应该遵循 jhipster 的做法。
1-创建一个模块，在导入和导出部分中添加库模块
2-将此模块（在导入和导出部分中）添加到 shared.module.ts 模块。

一个很好的例子在这里：https ://medium.com/@cyril.casaucau/how-to-add-angular-material-on-an-jhipster-5-x-app-97c9569c9f97

或者简单地将 NgSelectModule 模块添加到 shared-libs.module.ts 文件中。

于 2019-01-23T11:44:26.113 回答