Выпадающее меню PrimeNG 6 отображается некорректно

Я перешел на PrimeNG 6.1.7, и у меня проблема с раскрывающимся списком p. Это мой импорт кода в app.module (взят из простого примера):

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule} from '@angular/platform-browser/animations'; 
import {DropdownModule} from 'primeng/dropdown'; // include this for dropdown support
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DropdownModule // dropdown support
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:
        []

})
export class AppModule { }

В app.component.ts:

import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  employes: SelectItem[];
  selectedEmploye: any;  

  constructor(){
    this.employes = [
      {label:'Select Employee', value:null},
      {label:'Franc', value:1},
      {label:'Kiran', value:2},
      {label:'John', value:3},
    ];
  }
ngOnInit(){
}
}

А в html я:

<p-dropdown employes="" ngmodel="" options="" selectedemploye=""></p-dropdown>
Selected Employee: {{selectedEmploye }}

Я также установил primeicons e, импортировав его в angular.json:

...
"styles": [
   "src/styles.css",
   "node_modules/primeicons/primeicons.css"
],
...

Раскрывающийся список отображается неправильно: введите описание изображения здесь

Любое предложение? Большое спасибо...


angular dropdown primeng
person bigskull    schedule 28.11.2018    source источник

Ответы (3)


arrow_upward
1
arrow_downward

правильный html для использования раскрывающегося списка primeng в этом случае должен быть:

<p-dropdown [options]="employes" [(ngModel)]="selectedEmploye"></p-dropdown>

Если после этого исправления раскрывающийся список не выглядит нормально, вам нужно посмотреть, как вы установили библиотеку primeng, и правильно ли настроены стили и импортированы ли они в ваш index.html (https://www.primefaces.org/primeng/#/setup)

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
person Octavio Garbarino    schedule 28.11.2018
comment
Спасибо! Я импортировал файлы css в index.html, и теперь раскрывающийся список отображается правильно, но при нажатии на раскрывающийся список значков не отображается. В инспекторе F12 я вижу, что список, содержащий div, всегда отображается: none ... Как это возможно? - person bigskull; 28.11.2018
comment
Вы установили npm install @ angular / animations --save? и добавить BrowserAnimationsModule? - person Octavio Garbarino; 28.11.2018
comment
Я решил! Там был специальный файл css, который заменил primeng css ... Спасибо Октавио Гарбарино! - person bigskull; 28.11.2018
comment
Я рад, что вы нашли последний выпуск и что мой ответ вам помогает! Добро пожаловать! - person Octavio Garbarino; 28.11.2018

arrow_upward
0
arrow_downward

Я использую sass в своем проекте angular, и вот как я импортирую файлы primeng css, все работает нормально

style.scss

@import "primeicons/primeicons.css";
@import "primeng/resources/themes/nova-dark/theme.css";
@import "primeng/resources/primeng.min.css";

Primeicons - это другой пакет, поэтому обязательно установите его npm install primeicons --save

person malbarmavi    schedule 28.11.2018

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой. Обязательно добавьте необходимые зависимости через npm install, а также модуль анимации браузера из angular core. Тем не менее, в конечном итоге проблему для меня решило то, что мне пришлось установить несколько дополнительных свойств primeNG, перечисленных в документации для автозаполнения в моем коде шаблона, а затем мне пришлось переопределить стили primeNG по умолчанию в моем файле scss.

Ниже перечислены код шаблона и scss. Очевидно, вы захотите настроить в соответствии с желаемым стилем, но у меня это сработало.

Код шаблона автозаполнения PrimeNG

 <p-autoComplete name="p-autoComplete" [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" class="p-autocomplete"
      [suggestions]="listAuthors" (completeMethod)="filterAuthors($event)" [size]="40"
      field= "author" placeholder="Search Quotes" [dropdown]="true" [minLength]="1" [autoHighlight] = "true"
      [dropdown]="true" [autofocus]= "true" [style]="{'text-transform': 'uppercase'}"
      scrollable="true">
  </p-autoComplete>

scss

.ui-autocomplete-dd .ui-autocomplete-dropdown.ui-corner-all{
  position:absolute;
  transform: translateX(-100%);
}

.ui-autocomplete{
  width: 100% !important;
}
  .ui-autocomplete-input{
  width: 100% !important;
}
person reverb1010    schedule 23.06.2019