如何在单击按钮时动态显示mat进度条
在单击按钮时动态显示mat进度条，可以通过以下步骤实现：
- 首先，确保你已经安装了Angular Material库。如果没有安装，可以通过以下命令进行安装：
npm install @angular/material @angular/cdk- 在你的组件文件中，导入所需的Angular Material组件和动画模块：
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';- 在组件类中定义一个布尔类型的变量来控制进度条的显示与隐藏：
export class YourComponent {
showProgressBar: boolean = false;
}- 在HTML模板中，使用
mat-progress-bar组件来显示进度条，并使用*ngIf指令根据showProgressBar变量的值来控制其显示与隐藏：
<button (click)="startProgressBar()">点击开始</button>
<mat-progress-bar *ngIf="showProgressBar" mode="indeterminate"></mat-progress-bar>- 在组件类中，定义一个方法来启动进度条，并在该方法中设置
showProgressBar变量为true，以显示进度条。你可以使用setTimeout函数来模拟一个耗时操作，并在操作完成后将showProgressBar变量设置为false，以隐藏进度条：
startProgressBar() {
this.showProgressBar = true;
setTimeout(() => {
// 模拟耗时操作
this.showProgressBar = false;
}, 3000); // 3秒钟
}这样，当你点击按钮时，进度条将会显示出来，并在3秒钟后自动隐藏。
关于Angular Material的更多信息和使用方法，你可以参考腾讯云的Angular Material产品介绍页面：Angular Material 产品介绍
相关·内容
1回答
角质材料进度表未被调用
angular
我试图使用角度材料进度条，我在app.module.ts中使用了这个代码
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatProgressBarModule } from '@angular/material/progress-bar';
],
imports: [
浏览 4提问于2021-12-15得票数 1
回答已采纳
5回答
如何从内部元素中剔除/关闭角Snackbar元素
angular、angular-material
我目前有一个snackbar元素，其中包含一个mat-progress-bar。我想关闭snackbar元素。我的代码现在看起来是这样的。
import { MAT_SNACK_BAR_DATA, MatSnackBar } from '@angular/material';
import { map } from 'rxjs/operators';
@Component({
selector: 'app-upload-progress-snackbar',
template: `
Progress:
<mat-prog
浏览 0提问于2018-12-06得票数 9
回答已采纳
3回答
如何使用MatSnackBar中的mat图标？
angular、typescript、angular-material
当显示来自使用MatSnackBar的服务消息服务的消息时，我希望显示一个图标。(材料模块在应用程序的模块中导入)。
但是，默认的snackbar不支持图标。我如何实现这样的特性？
import { Injectable } from '@angular/core'
import {MatSnackBar} from '@angular/material/snack-bar';
import {MatSnackBarHorizontalPosition, MatSnackBarVerticalPosition} from "@angular/materi
浏览 0提问于2018-11-25得票数 4
回答已采纳
3回答
角质材料进度表和进度条没有显示
angular、progress-bar、angular-material、spinner、transparent
我正在研究角4。我做了一个新项目：
ng new test-app
然后我跑了：
npm install --save @angular/material @angular/cdk
ng g c first
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import
浏览 0提问于2018-02-01得票数 3
回答已采纳
1回答
角度材质进度栏始终显示100%
angular、angular-material、progress-bar
我遇到了一个奇怪的问题，在角度10的材料进度条。进度条显示为100%，即使在设置后，它的值小于：
在我的component.html中，代码非常简单：
<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
它渲染正常，但显示为100%
我看不出我可能做错了什么。
下面是我的组件文件的内容：
import { Component, OnInit } from '@angular/core';
@Component({
selector:
浏览 7提问于2020-07-30得票数 1
回答已采纳
1回答
如何在选中复选框时在内容之前显示加载动画？(角度)
angular、angular-material
当我单击复选框材料时，如何在动画之后显示内容。因此，我希望当我单击checkox时，首先显示动画，然后在5秒或一段时间后显示文本。我附上了代码！我将感谢任何人的帮助！谢谢! 组件 <mat-checkbox #small (change)="0">Check me!</mat-checkbox>
<p *ngIf="small.checked">Small paragraph</p>
<div *ngIf="small.checked" class="loader">&
浏览 17提问于2019-04-07得票数 0
回答已采纳
3回答
使用@ViewChild在角分量之间共享布尔数据时，将得到未定义的属性
html、angular、typescript、frontend、angular-components
我有一个名为RedirectUserToMobileAppComponent的组件，我想从它与app.component共享一个名为enableLoginForm的布尔属性。当我执行时，我会得到以下错误：
enableLoginForm是app.component中ngAfterViewInit上的未定义属性。
这是RedirectUserToMobileAppComponent组件：
import {
Component,
ComponentFactoryResolver,
ComponentRef,
Injec
浏览 6提问于2021-10-12得票数 3
回答已采纳
4回答
SnackBar没有出现在角9中
angular、typescript、angular-material
当您输入不正确的信息时，我有一个SnackBar应该在登录中显示，但是当这种情况发生时，SnackBar不会显示它被其他元素重叠，我如何修复它？
下面我会把我想要做的事情
sendAdmin()是由页面中的一个按钮调用的函数。
snackMessage:string = 'Introduce valid data';
constructor(private _builder:FormBuilder,private router: Router,
private adminService: AdminService,public _snackBar: MatSnac
浏览 5提问于2020-02-27得票数 1
回答已采纳
1回答
有角度的材料，为什么动画不起作用？
javascript、angular、angular-material
我使用的是angular material 8.1.3，我不知道为什么动画不能工作。动画不能在整个应用程序中工作，但我呈现的是菜单组件。 它应该是动画，如本例所示：]1 toggles等也存在同样的问题。 我有这样的material模块： import {A11yModule} from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal';
impo
浏览 10提问于2020-04-17得票数 0
回答已采纳
1回答
如何在单元测试角度上使用@input创建组件？
angular、typescript、jasmine、karma-jasmine
在创建具有@输入的测试组件时，我遇到了问题。在组件内部，它使用模型反馈中的属性，我在测试文件中进行了导入，但它显示了错误。有人能帮我吗？
feedback-card.component.ts
import { Component, OnInit, Input, HostBinding } from '@angular/core';
import { FeedbackCommentsComponent } from '../feedback-comments/feedback-comments.component';
import { routerAnimatio
浏览 2提问于2021-03-26得票数 0
回答已采纳
3回答
对话框中确认删除后不更新角表
javascript、angular、typescript
请有人帮忙，我遇到了这个问题-在确认删除表数据后没有更新。删除可以工作，但我不想总是刷新页面。
但是，我尝试在表组件中订阅和取消订阅，将删除功能添加到表组件中，但没有成功。
删除compononent.ts
import { Component} from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { CarService } from 'src/app/services/car.service';
@Component(
浏览 8提问于2022-07-08得票数 1
1回答
错误：'NG0303:无法绑定到'max‘，因为它不是“mat-progress bar”的已知属性。同时角度测试
angular、testing、jasmine
component.spec文件
试图测试一个组件螺母，一直在终端中获取这些消息。它不会失败测试，但会像警告一样给出错误。有人能在这里提供解决方案吗。我在这里导入所有必需的模块.
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms
浏览 2提问于2022-09-30得票数 0
1回答
角材料部件在“物质对话”中不起作用
angular、angular-material
我在对话框中使用mat-form-field、mat-dialog-close和ng-model属性。但是它的抛出错误表示它不知道输入/按钮的属性。
标题-dialog.html
<h1 mat-dialog-title></h1>
<div mat-dialog-content>
<p>Enter Column Name</p>
<mat-form-field>
<input matInput [(ngModel)]="data.animal" />
</mat
浏览 5提问于2020-08-07得票数 4
回答已采纳
1回答
使用APP_INITIALIZER添加动态加载消息
html、angular、typescript
我有一个应用程序，在初始化之前做一些后端调用。为此，我有一个加载屏幕，它告诉用户当前正在加载某些内容。问题是，我也想显示什么是目前正在加载。如果其中一个后端调用失败，它应该具体地显示出错误的地方。为了说明这个问题，我编写了一个小示例应用程序。
app.module.ts
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } f
浏览 7提问于2022-04-29得票数 0
1回答
如何根据if条件呈现html
html、node.js、angular
我想根据我的component.ts文件中的if条件显示不同的html文本
<div class="login">
<div *ngIf="emailStatus == EmailStatus.verified">
<h1>Your email has been verified.</h1>
<a href routerLink="/authenticate/login">Please login</a>
</div>
浏览 5提问于2022-03-13得票数 0
2回答
修正“垫图标”不是已知的元素错误。
angular、typescript、angular-material、mat-icon
我有一个角度项目，在这个项目中，我试图使用角材料库。在我的app-routing.module中，我有以下代码：
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SndComingSoonPageComponent } from './feature/pages/snd-coming-soon-page/snd-coming-soon-page.component';
const
浏览 5提问于2021-09-25得票数 5
1回答
角度材质中的动画不起作用。问题不是NoopAnimationsModule、材料版本或app.module.ts中导出的内容
javascript、angular、typescript、angular-material2
我是Angular 2的新手，我正在尝试将angular材料实现到我的表单中。我之前在SO上读过关于这个主题的问题，没有一个解决方案对我有帮助。这不是我app.module.ts中的NoopAnimationsModule的问题。而且(我认为)在角度材料的版本中这不是问题。我还在styles.scss中添加了主题。如果您能快速看一眼，我将不胜感激。谢谢! package.json {
"name": "client",
"version": "0.0.0",
"scripts": {
"
浏览 7提问于2019-12-17得票数 1
3回答
使用*ngif不显示/隐藏角度材质进度条
angular、typescript、angular-material、jspdf
我有一个应用程序，其中的网页需要显示一个进度条，而网站fetech的数据从几个API和构建一个pdf document.Here我使用jsPDF来构建pdf。我在我的模板中使用了以下实现。
<div class="col-md-2 col-sm-2">
<mat-progress-bar mode="indeterminate" [value]="progressValue" *ngIf="isPrintinginProgress"></mat-progress-bar>
<Button
浏览 0提问于2019-12-10得票数 2
1回答
错误不能绑定*ngFor
html、angular、typescript、visual-studio-code、angular9
我是一个角度初学者，我正在尝试创建一个看起来像CapitalistAdventure的应用程序。但我有一个错误，我无法解决，并希望得到一些帮助，请。首先是我的应用程序的外观：
错误位于app.component.html上，它说：
不能绑定到“产品”，因为它不是“应用产品”的已知属性。1.如果“app-product”是一个角度部件，并且有“product”输入，则验证它是否是该模块的一部分。2.如果'app-product‘是一个Web组件，则在该组件的'@NgModule.schemas’中添加‘@NgModule.schemas’以抑制此消息。3.若要允许任何属性添
浏览 2提问于2020-04-08得票数 0
回答已采纳
1回答
角度匹配中的路由
angular、typescript、routes、angular-material、angular-activatedroute
我试图将路由添加到角中的角材料Mat对话框中。但有一个问题正在发生。
当我尝试添加路由URL时，手动从
https://localhost:3200
至
https://localhost:3200/login
或
https://localhost:3200/signin
不会弹出来
Tab交换问题
此外，还有另一个问题，当打开对话框进行登录时，如果我选项卡切换到SignIn，则URL没有变化。
Navbar.component.ts (对话框初始化组件)
import { Component, OnInit, Output, EventEmitter, Inject } from &#
浏览 4提问于2020-07-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
