JHipster и угловой компонент ng-select - PullRequest
Новая
       10

JHipster и угловой компонент ng-select

0 голосов
/ 24 ноября 2018

Я разрабатываю приложение, используя последнюю версию JHipster, где я пытаюсь показать раскрывающийся список с несколькими вариантами выбора, используя модуль {<ng-select>} из https://github.com/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'
    }
];
}

компонент people: 

    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>

Любая помощь приветствуется

1 Ответ

0 голосов
/ 23 января 2019

У меня была та же проблема, что и у вас, и я решил ее.

Это не проблема, связанная с <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.

...