PrimeNg 下拉菜单显示框旁边的占位符文本，第二个框可编辑时

Question

如标题所示，PrimeNg 下拉元素的行为如下：它在下拉框旁边显示占位符文本，并在可编辑时将其显示在第二个框中。我正在寻找一种方法让它表现得像一个普通的下拉菜单。代码和图片如下。

Html-代码:

<h5>PrimeNG dropdown component</h5>
<div>
  <p-dropdown
    [options]="lang"
    [editable]="true"
    placeholder="Select a Language"
    [showClear]="true">
  </p-dropdown>
</div>
<button (click)="start()">Start</button>

ts-代码：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'frontend';

  start(){}

  lang = [
    { name: "HTML" },
    { name: "ReactJS" },
    { name: "Angular" },
    { name: "Bootstrap" },
    { name: "PrimeNG" },
  ];
}

Answer 1

经过一些挖掘，结果发现 styles.css 文件中缺少以下内容 - 后来它起作用了

@import '~primeicons/primeicons.css';
@import '~primeng/resources/primeng.min.css';
@import '../node_modules/primeng/resources/themes/saga-blue/theme.css';

PrimeNg 下拉菜单显示框旁边的占位符文本，第二个框可编辑时

PrimeNg dropdown menu showing placeholder text next to the box, second box when made editable

dropdown

primeng

angular