无法在angular中使用primeng设置p进度条(不确定)的样式
在Angular中使用PrimeNG设置p进度条的样式是可以实现的。PrimeNG是一个基于Angular的UI组件库，提供了丰富的UI组件和样式，包括进度条组件。
要在Angular中使用PrimeNG的进度条组件，首先需要安装PrimeNG和PrimeIcons依赖：
- 在项目根目录下执行以下命令安装PrimeNG和PrimeIcons：
- 在项目根目录下执行以下命令安装PrimeNG和PrimeIcons：
- 在
angular.json文件中添加PrimeNG和PrimeIcons的CSS样式文件路径： - 在
angular.json文件中添加PrimeNG和PrimeIcons的CSS样式文件路径： - 这样就可以在应用中使用PrimeNG的样式了。
接下来，可以在组件中使用PrimeNG的进度条组件。假设你要在一个组件中使用进度条，可以按照以下步骤进行操作：
- 在组件的HTML模板中添加进度条组件：
- 在组件的HTML模板中添加进度条组件：
- 这里的
progressValue是一个组件中定义的变量，用于控制进度条的值。 - 在组件的TypeScript代码中定义进度条的值：
- 在组件的TypeScript代码中定义进度条的值：
- 这里的
progressValue可以根据实际需求进行设置。
至此，你就可以在Angular中使用PrimeNG设置进度条的样式了。根据具体的需求，你可以通过调整PrimeNG提供的进度条组件的属性来实现不同的样式效果。
PrimeNG进度条组件的一些常用属性包括：
value：进度条的值，取值范围为0到100。showValue：是否显示进度条的值，默认为false。style：自定义进度条的样式。styleClass：自定义进度条的CSS类。
更多关于PrimeNG进度条组件的详细信息，你可以参考腾讯云的相关产品文档：
相关·内容
我正在寻找一个关于角度风格的解释。 我正在使用Angular 10和Prime-ng，我已经添加了一个自定义样式，它应该覆盖Prime-ng组件，但是当为应用程序提供测试时，样式不会覆盖它，它会将包含原始样式的标签直接放在
(1)包含要在p进度条(即高度: 10px；)上应用的css规则(在angular.json样式节点上注入)。
(2) Primeng组件的默认样式来自Primeng库，因为我在我的一个应用程序组件上使用了这个组件：
<p-progressBar [value]="value"></p-progressBar>
浏览 12提问于2021-08-25得票数 0
无法在angular中使用primeng设置p进度条(不确定)的样式
app.component.html (纯html)
<p-progressBar mode="indeterminate" class="someClass"></p-progressBar>
app.component.css (试用了两种样式，如下所示)
.ui-progressbar.ui-progressbar-indeterminate {
background: #8ec5fc;
height: 4px;
}
.someClass {
backgrou
浏览 1提问于2018-02-09得票数 1
1回答
我目前正在开发一个使用Angular 4，Angular Material和PrimeNG组件的用户界面。
我遇到的最新组件是来自PrimeNG的MultiSelect组件：
我只是想让组件的宽度适合父组件的100%。
编辑此组件的CSS类是否需要遵循特定的流程？文档中说对内联使用"Style“--这是不是意味着：
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100
浏览 6提问于2017-08-04得票数 4
回答已采纳
我是从PrimeNG开始的，但我没有得到很酷的风格。但是，我没有看到ng服务或浏览器日志中的错误。
组件(我有一个日历和3个按钮)会出现，但是看起来很枯燥。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
im
浏览 3提问于2019-12-13得票数 0
回答已采纳
2回答
自从我的应用程序升级到Angular 7后，我的Primeng日期选择器就不能工作了。当我点击适当的字段时，日期选择器不显示，并且我无法通过键盘输入日期。
my.component.html
<label>Start Date:</label>
<p-calendar
[(ngModel)]="filterStartDate"
inputStyleClass="pCalendarInput"
[yearNavigator]="true"
yearRange="2000:2
浏览 31提问于2019-07-09得票数 0
3回答
我迁移到了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-
浏览 1提问于2018-11-28得票数 1
回答已采纳
1回答
我使用primeNG (Angular2)来显示模式：
<p-dialog appendTo="body" [(visible)]="displayCreateGateway" modal]="true" [width]="700">
当我在移动视图(小于声明的700 am )模式不能正确显示。例如:我有窗口宽度500 px，但模态生成在700 px (适当的宽度:100%)。我认为这不是我的代码的错，因为在官方网站primeNG的情况是一样的。
你知道如何解决这个问题吗？最简单的方法可能是在css中添加媒体查询，但是
浏览 2提问于2017-06-30得票数 3
回答已采纳
我创建了一个新的Angular 10应用程序(也尝试了ng 8和9)： primeng-menu>ng new primeng-menu 已安装PrimeNG模块： npm install primeng --save和npm install primeicons --save package.json： "dependencies": {
"@angular/animations": "~10.1.1",
"@angular/common": "~10.1.1",
"@angular/
浏览 35提问于2020-09-16得票数 1
回答已采纳
我有一个带有PrimeNg库的Angular项目，我想使用p-dropdown组件，我将其导入到app.module文件中，如下所示：
import { DropdownModule } from "primeng/dropdown";
imports: [
DropdownModule,
],
当我在html文件上使用它时：
<div class="charts-dropdown">
<p-dropdown [options]="chartsDropdownLookup" [(ngModel)]=&#
浏览 31提问于2020-05-21得票数 0
2回答
嗨，我正在尝试对datatable使用primeNG，但是输出只是一个基本表，没有应用它的属性。构成部分：
import { Component } from '@angular/core';
import {AccordionModule} from 'primeng/primeng'; //accordion and accordion tab
import {MenuItem} from 'primeng/primeng';
import {DataTableModule} from 'primeng/component
浏览 2提问于2017-10-13得票数 0
回答已采纳
我添加了一个PrimeNG确认对话框(遵循官方文档中的示例)：
component.html
<p-confirmDialog appendTo="body" #cd>
<p-footer>
<button type="button" pButton class="btn btn-primary btn-normal mr-4" label="Print or save" (click)="cd.accept()"></button>
浏览 10提问于2018-08-30得票数 0
回答已采纳
1回答
我们在项目中使用了PrimeNG 5.2.x和Bootstrap 4.2.x。但是，PrimeNG组件未正确显示。当我们在文件.angular-cli.json中删除对bootstrap.min.css的引用时，PrimeNG组件可以正确显示。
有没有办法同时使用这两种方法？PrimeNG和Bootstrap是否可以共存？
谢谢
浏览 1提问于2018-05-07得票数 0
1回答
我有一个PrimeNG进度条
<p-progressBar value="{{ percentage }}"></p-progressBar>
但是，当显示的百分比是，例如，80%时，条形本身可能表示一个百分比，比方说，50%，因为它不断增长，达到80%。
如何使进度条的长度离散地跳转到正确的值？我的JavaScript，TypeScript和角度知识是非常有限的。
浏览 5提问于2022-03-18得票数 0
当从PrimeNG 9升级到PrimeNG X时，样式就会中断。ui-s样式被重命名为p-s。控制台中没有错误，某些组件的行为也得到了改进(例如，p-inputNumber) --所以看起来这只是一个样式问题。
样式有了很大的改进，但是如果我在样式中添加一个主题: angular.json："node_modules/primeng/resources/themes/nova/theme.css"，那么样式仍然会很糟糕。
如果有人能就如何解决这一问题提供一些指导，我将不胜感激：
逐个修正样式(这就像再次为整个应用程序创建样式一样)
等待PrimeNG社区修复一些
浏览 2提问于2020-09-16得票数 2
回答已采纳
3回答
PrimeNG数据表不工作
、、、、
我试图将PrimeNG数据表与angular2一起使用，但它似乎不起作用。我已经安装了PrimeNG和npm。在我的组件中我导入
import {DataTableModule,SharedModule} from 'primeng/primeng';
然后在模板中使用
<p-dataTable [value]="students">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"&g
浏览 0提问于2016-12-02得票数 0
3回答
我正试图让primeng在我的angular2项目中工作，但还没有让它发挥作用。
采取的步骤：
安装：npm install primeng --save
添加到模块import {DialogModule} from 'primeng/primeng'; @NgModule({... imports: [DialogModule, ...]});中
向index.html添加样式表
添加到模板中：<p-dialog header="Test" [(visible)]="display"> Content </p
浏览 2提问于2016-12-08得票数 0
回答已采纳
我用的是角13和PrimeNG 13.4.1。我想让标签直接放在文本字段的上方，所以我创建了
<div class="ui-fluid" style="padding-top: 200px; padding-bottom: 200px;">
<div class="p-field">
<span class="p-float-label">
<input type="text" formControlName="
浏览 11提问于2022-07-15得票数 0
回答已采纳
3回答
我想在Ionic 4应用程序中使用PrimeNG组件。我进行了如下工作。我创建了一个空白的Ionic 4应用程序：
ionic start myApp blank
接下来，我将下载PrimeNG到该项目：
npm install primeng@7.0.0 --save
npm install primeicons@1.0.0 --save
接下来，我将第一个PrimeNG UI组件(ButtonModule)导入为app.module.ts中的模块：
import { NgModule } from '@angular/core';
import { Browser
浏览 2提问于2019-03-07得票数 1
回答已采纳
有人能帮我吗:我正在尝试让PrimeNG与一个用angular-cli创建的Angular应用程序一起工作。我在我的新应用程序中安装了PrimeNG (用命令行界面创建)，但是我不能让样式工作。PrimeNG网站指出，我需要在Index.html中添加以下内容
href="../node_modules/primeng/resources/themes/omega/theme.css"
href="/node_modules/primeng/resources/primeng.min.css"
href="./assets/font-awesome-4.
浏览 1提问于2016-11-17得票数 3
1回答
我正在使用primeng日程表，日历看起来很好，但事件没有显示，如下图所示。这个项目相当简单。只需使用primeng和schedule。没什么复杂的。我已经附上了我的代码。如果任何人以前遇到过这个问题，并有解决方案。您的帮助将不胜感激。非常感谢
angular.json
"styles": [
"src/styles.css"
],
"scripts": [
"node_modules/moment/min/moment.min.js",
"node_modules/fullcalenda
浏览 39提问于2018-08-30得票数 0
1回答
根据我的要求，我通过PrimeNG实现了一个组织结构图。我来自TreeNode类型数组的数据正在UI中正确地呈现，但设计不是这样。下面是我的代码：
app.module.ts
import {OrganizationChartModule} from 'primeng/organizationchart';
imports: [ OrganizationChartModule ]
thankyou.component.ts
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
浏览 1提问于2020-07-04得票数 0
回答已采纳
1回答
我在学角。我在做一个项目。我决定从<p-calendar>添加一个primeng组件。我还安装了软件包。这些版本是：
"primeicons": "^2.0.0",
"primeng": "^5.2.7",
我的一切都很完美。见此：
但现在我只想过几个月。我想把它改成月选机。在做了一些研究之后，我才知道在primeng: ^5.2.7中只有一个月是没有选择器的。所以我升级到：
"primeicons": "^2.0.0",
"primeng": "6.1.6
浏览 1提问于2019-11-17得票数 2
1回答
我可以获取<button pButton type="button" class="ui-button-danger"></button>，但它不会对其进行样式设置。我已经在我的index.html中链接了primeng.min.css。但我假设我的.angular-cli.json文件有问题，因为样式部分是空的。
编辑:控制台错误说:无法加载资源:服务器在<link rel="stylesheet" type="text/css" href="/node_modules/primeng/re
浏览 0提问于2017-09-15得票数 4
我在我的Angular应用程序中使用了PrimeNG。我打算使用p-dropdown组件，但它在我的组件中呈现得非常奇怪。 ? 这看起来与他们在文档中演示的完全不同。 这是package.json。(也许Bootstrap和PrimeNG版本控制未对齐，或者类似的情况？)： {
"name": "soar",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng
浏览 33提问于2019-06-30得票数 2
我从Angular 2 RC5和PrimeNG 1.0.0-beta.13测试版开始。我以xModules的形式加载PrimeNg组件，显示数据表、输入、SelectItem、按钮、模态没有任何问题。然而，当我尝试使用TabView或Accordion时，我得到了这个错误。
未处理的Promise rejection:模板解析错误：'p-accordionTab‘不是已知元素：
我在@NgModule中导入了TabViewModule。目前，我更新了我的应用程序，使用Angular 2.0.0 (最终版)和PrimeNg beta.16 (最新版)，但仍然有错误。我正在使用webpac
浏览 22提问于2016-09-20得票数 20
我想在我的应用程序中使用。所以我所做的：
npm i primeng --save
然后，我将DropdownModule添加到从app.module.ts的导入中。之后，我在html中包含了以下代码：
<p-dropdown [options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown>
在运行ng serve并启动localhost:4200时，我得到以下错误：
未找到./node_modules/
浏览 0提问于2018-12-21得票数 4
回答已采纳
当我在中从primeNG中添加导入TableModule时，我遇到了一个错误：“Module: error:无法解析‘@ar角/cdk/滚动’”。为什么会抛出此错误？我看不到primeNG文档中提到的任何模块依赖。
错误：
Failed to compile.
./node_modules/primeng/components/dropdown/dropdown.js
Module not found: Error: Can't resolve '@angular/cdk/scrolling' in '/Users/admin/angular/MovieApp
浏览 0提问于2019-04-10得票数 57
回答已采纳
sell.component.html:
<p-fileUpload #fileInput name="fileIcon"
url="rest/batch/file/multimedia/"></p-fileUpload>
以上是fileupload标签，我试图用它来上传图像和它的进度条。
sell.component.ts:
import { ViewChild, Component, NgModule, VERSION, OnInit } from '@angular/core'
浏览 2提问于2018-02-12得票数 3
回答已采纳
你好，我在我的Angular项目中使用了PrimeNg组件。根据PrimeNg文档和Angular文档，我尝试了':host ::ng-deep'，':host-context()。但是什么都不起作用。
自定义css的PrimeNg文档：
Angular文档：
请建议我为PrimeNg组件添加自定义样式的最好方法。
浏览 0提问于2021-03-25得票数 0
我尝试在页面初始化时禁用PrimeNg下拉菜单，如下所示
this.searchForm = this.formBuilder.group({
dropdown: [{value: '', disabled: true}]
});
但这会给出一个浏览器加载错误，如下所示：
this.valueAccessor.setDisabledState is not a function
我在超文本标记语言中使用PrimeNG下拉菜单，如下所示：
<p-dropdown [options]="[{label: 'A
浏览 4提问于2016-09-09得票数 3
回答已采纳
我不能导入原始组件使用gulpfile.js，但在哪里我可以导入其他第三方组件。
我得到了未知源错误。请帮帮忙。
我必须更改primeng.js中的路径吗？
Layout.cshtml：
<script src="js/primeui-ng-all.js"></script>
<script>
System.config({
packages: {
'app': {
format: 'register',
浏览 0提问于2016-04-19得票数 1
我在一个角10应用程序中使用PrimeNG 10.0.3。在它中，我导入了几个PrimeNG组件并使用它们，没有问题。然而，当我尝试使用TabView模块时，我得到了error NG8001：‘p’不是一个已知的元素，以及error NG8001：‘p’不是一个已知的元素。
我创建了一个名为primng.module的模块，其中托管了所有PrimeNG导入：
import { NgModule } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { Blo
浏览 2提问于2020-11-08得票数 0
回答已采纳
我使用的是Angular2，primeng 2.0.4。
我遵循了网站"“中提到的所有步骤。现在使用以下代码：
<form class="form-inline">
<div class="form-group col-md-6">
<p-calendar [showIcon]="true"></p-calendar>
</div>
<div class="form-group col-md-6">
<p-calendar [s
浏览 2提问于2017-05-05得票数 0
回答已采纳
1回答
我正在尝试将primeng库包含到我的项目中
package.json
"dependencies": {
"@angular/common": "~2.2.3",
"@angular/compiler": "~2.2.3",
"@angular/core": "~2.2.3",
"@angular/forms": "~2.2.3",
"@angular/http": "~2.2.3
浏览 3提问于2017-04-13得票数 3
我在angular.json样式数组中包含了一些样式，如下所示：
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/omega/theme.css",
"node_modules/primeng/resources/themes/bootst
浏览 1提问于2018-08-24得票数 9
我正在使用Angular 11的PrimeNG多选。其中一个选项标签有更长的文本。我想切片标签，如果它超过一定的长度。有谁能帮我实现这一点吗？
选项是
@Input() options: ISelectOption<number, string>[];
<p-multiSelect
#multiSelect
[options]="options"
[(ngModel)]="values"
optionLabel="name"
dropdownIcon="fas fa-caret-
浏览 62提问于2021-10-13得票数 1
1回答
目前，我正在尝试将Angular 7项目中的PrimeNG从^5.2.7升级到^7.1.3。在更新之后，当我运行"ng serve“时，我得到了与dropdown和multiselect相关的错误。要解决这个问题，建议安装@angular/cdk。但是完成这一步后，我的样式就崩溃了，因为@angular/cdk将所有类从"fa“(字体棒)更改为"pi”(primeicons)。还添加了一些新的样式，例如在"ui-dropdown“类上。这在一个大项目中产生了很多问题。有什么方法可以防止在更新PrimeNG时更改样式和类吗？ 提前谢谢。
浏览 35提问于2020-04-10得票数 0
我正在尝试实现PrimeNG烤面包机，但它没有显示，不确定我错过了什么。我按照如下步骤操作：
npm install primeng --save
npm install primeicons --save
我在angular-cli样式中添加了以下内容：
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css
浏览 0提问于2018-10-25得票数 3
1回答
我正在研究PrimeNG组件。但是我对浏览器上的UI显示有问题。
现在，我想显示静态下拉列表。我参考了的资料。下面的代码将显示该组件。
HTML文件
<h3 class="first">Single</h3>
<p-dropdown [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City"></p-dropdown>
<p>Selected City: {{selectedCity
浏览 1提问于2017-10-03得票数 2
回答已采纳
我在angular 7中使用primeng p编辑器，无法在特定位置设置光标位置，默认情况下，它仅显示在起始位置。 我使用p-editor的方式如下： <p-editor [(ngModel)]="remarks" [style]="{'height':'10rem'}">
<p-header>
<span class="ql-formats">
<button class="ql-bold" aria-label="Bold"
浏览 35提问于2019-02-08得票数 0
我正在尝试集成JHispter生成的angular应用程序中的PrimeNG editor。
我关注了和的PrimeNG站点
npm install primeng --savenpm install @angular/animations --savenpm install quill --saveAdd在html fileexecuted EditorModule命令中的home.modulesAdded <p-editor [(ngModel)]="text" [style]="{'height':'320px'}"&
浏览 58提问于2018-01-14得票数 2
我一直在使用PrimeNG作为我正在开发的Angular TypeScript应用程序的UI库，我在自定义PrimeNG下拉菜单的字体大小样式和下拉触发器图标样式时遇到了麻烦。似乎PrimeNG的样式文档在如何定制它方面相当含糊。 无论我如何尝试调整它，字体大小在下拉列表中都不会改变。我不确定是否应该使用html中的内联样式( TypeScript中的属性)，还是应该覆盖PrimeNG CSS样式来实现这一点。这也适用于下拉触发器图标。 下面是我的HTML、TypeScript和CSS。 <p-dropdown [options]="heights" [style]=&
浏览 10提问于2020-12-15得票数 0
我有一个使用.Net内核的Angularjs2项目。我正在尝试使用PrimeNG数据表进行CRUD操作。我正在调用一个API服务来从数据库获取数据。我已经写了两个组件，其中一个是使用简单的循环通过服务的数据，我得到了页面上的记录。第二个页面使用PrimeNg数据表并使用相同的服务，但屏幕上没有显示任何内容。在尝试使用F12调试代码时，我没有看到任何错误，对服务的调用返回了正确的数据。但是在dom对象中，我没有看到生成任何数据。附件是HTML和ts文件的代码
项目详情
<p-dataTable [value]="projects" selectionMode="
浏览 3提问于2016-12-02得票数 1
TProgressBar是否支持FireMonkey中的不确定样式？如果是，如何使用不确定的样式？
在Mac和较新版本的Windows上，有两种进度条样式。一种是确定进度条，在该条中，您知道最小值、最大值和当前值。在这种情况下，进度条通常用于显示特定任务完成的百分比。Fire猴子通过使用TProgressBar的Min、Max和Value属性来支持此方法。
进度条的另一种样式是不确定的进度条。当无法确定值时，使用不确定样式，但向用户指示任务正在进行。它通常由一个进度条表示，通过它的滑动对角线。
如果不支持它，那么您有什么建议可以利用FireMonkey以跨平台的方式实现吗？
编辑
我知道TAn
浏览 3提问于2011-11-18得票数 0
回答已采纳
我在angular2项目中使用angular2，并试图在页面中添加面板。我使用了下面的代码，我从primeng教程( )中获取了这些代码：-
我的html文件代码如下:-
<p-panel>
<p-header>
Header content here
</p-header>
Body Content
</p-panel>
我在我的模块中添加了从primeng导入所需的模块:-
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core
浏览 0提问于2017-01-23得票数 10
回答已采纳
让PrimeNG DataTable在我的web应用程序上正确渲染是有问题的。目前，显示器看起来是这样..。
在我的package.json依赖项一节中，如下所示
"dependencies": {
"@angular/common": "2.0.0",
"@angular/compiler": "2.0.0",
"@angular/core": "2.0.0",
"@angular/forms": "2.0.0
浏览 3提问于2016-09-17得票数 1
回答已采纳
我正在使用primeng版本- 5.2.4和angular 5.2.9
我使用primeng p-editor来编辑一些sql脚本。我知道p-editor在内部使用了quill，而quill支持使用highlightjs的语法突出显示。我想知道如何在angular 5中使用primeng p-editor配置highlightjs。
请帮帮我！！
浏览 33提问于2018-04-03得票数 0
我在浏览器中遇到错误
GET http://localhost:3000/multiselect.css 404 (Not Found)
Failed to load multiselect.css
当我试图在组件模块文件中导入MultiSelectModule时：
import { MultiSelectModule } from 'primeng/multiselect';
@NgModule({
...
imports: [CommonModule, FormsModule, MultiSelectModule],
...
我已经在app.modules.ts中导
浏览 6提问于2021-11-10得票数 0
1回答
我已经创建了一个组件，它将根据使用PrimeNg的城市用户选择来显示各自的国家。
如果用户选择London复选框并单击submit，请求应该转到后端API并获取国家名称并在UI上显示为: Selected在英国。
后端JSON响应:
data: {
"country" : "UK",
"status" : "success"
}
项目文件是:
app.component.html
<h5>Select City</h5>
<div class="p-field-checkbox&#
浏览 3提问于2021-03-19得票数 2
回答已采纳
2回答
为了学习，我修改了cli生成的初学者代码，如下所示。
app.component.ts
import { Component } from '@angular/core';
import {StepsModule,MenuItem} from 'primeng/primeng';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
ex
浏览 2提问于2017-05-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
