DropdownModule не отображается должным образом

Я создал раскрывающийся список с помощью DropdownModule. Выпадающий список отображается, но не так, как ожидалось, как показано ниже:

введите здесь описание изображения

машинопись

export const countryListOfObjects: SelectItem[]
    = [
  { label: 'Select a country', value: null },
  //A
  { label: 'Albania', value: { name: 'Albania', code: '' } },
  { label: 'Algeria', value: { name: 'Algeria', code: '' } },
  {
    label: 'American Samoa', value: { name: 'American Samoa', code: '' }
...]

HTML

  <p-dropdown [options] = 'countries'
                            [(ngModel)] = 'address.country'
                            formControlName = 'country'
                            [filter] = 'true'
                            ></p-dropdown>

Удаление привязки фильтра приводит к тому же отображению.

Я использую angular2-final и текущую версию Primeng. Никаких ошибок, связанных с праймингом, не наблюдается, за исключением следующих

client?93b6:76 [по умолчанию] Z:\node_modules\primeng\components\fileupload\fileupload.d.ts:2:9 Модуль '"J:/workspace/angular2/ts/epimss/node_modules/@angular/platform-browser /index"" не имеет экспортированного члена "DomSanitizer".

Спасибо


typescript angular angular-cli primeng angular2-forms
person st_clair_clarke    schedule 18.09.2016    source источник
comment
Включили ли вы ссылки на таблицы стилей primeng в свой index.html?   -  person R. Richards    schedule 18.09.2016
comment
Они были включены в стили angular-cli: ключ [..], как предлагается здесь http://stackoverflow.com/questions/39514408/angular-cli-primeng-require-is-not-defined   -  person st_clair_clarke    schedule 18.09.2016
comment
Интересный. Для меня, когда я добавил тему и основной CSS, выпадающий список начал отображаться правильно. Однако я добавил их через index.html.   -  person R. Richards    schedule 18.09.2016
comment
Изначально я добавил их в index.html, но потом angular2 пожаловался, что они не могут быть разрешены. Я нашел статью и следовал инструкции, и они были найдены. Вы используете angular-cli?   -  person st_clair_clarke    schedule 18.09.2016
comment
Я не использую CLI для проекта, который я тестировал primeng. Но я использовал интерфейс командной строки и без проблем добавил CSS в проект через index.html. С помощью CLI он добавляет moduleId: module.id к компонентам, что позволяет указывать относительные пути к стилям и шаблонам. Это может быть частью проблемы. Стоит проверить.   -  person R. Richards    schedule 18.09.2016
comment
В последней финальной версии module.id был удален из всех компонентов.   -  person st_clair_clarke    schedule 18.09.2016
comment
Ознакомьтесь с этим самостоятельным ответом: stackoverflow.com/questions/39551786/. Не повезло и со стилями компонентов. Раздражающий.   -  person R. Richards    schedule 18.09.2016

Ответы (1)


arrow_upward
0
arrow_downward

Это просто проблема CSS.

Вам нужно использовать кучу листов css, особенно Primeng и Font Awesome.

Вот как выглядит мой angular-cli.json

"styles": [
        "styles.css",
        "../node_modules/primeng/resources/themes/omega/theme.css",
        "../node_modules/primeng/resources/primeng.css",
        "../node_modules/font-awesome/css/font-awesome.min.css"
      ]

У меня возникла проблема при попытке импортировать Primeng.css, он жаловался на загрузку.gif. Поэтому я прокомментировал эту строку внутри css.

Если вы не используете angular cli, вы можете просто импортировать их в index.html.

Редактировать: если вы используете bootstrap css, это испортит раскрывающийся список primeng.

person David Pascoal    schedule 26.09.2016