Question

我正在使用最新版本的JHipster开发应用程序，其中我尝试使用https://github.com/ng-select/ng-select中的len_text_celaned模块来显示多选下拉列表。但是不显示。这是下面的代码。我的app.module.ts文件：

{<ng-select>}

DataService：

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'
    }
];
}

我的html代码是：

    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();
    }
}

感谢您的帮助

Answer 1

我遇到了与您相同的问题，并且已解决。

这与<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文件。

JHipster和Angular ng-select组件

1 个答案: