如何以角度 6 显示微调器
[英] How to show spinner in angular 6
本文介绍了如何以角度 6 显示微调器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 Angular 和 Web 开发的新手，但能够设计各种网页并使用 HTTP 客户端模块从服务器获取数据.
从服务器获取数据时，我想显示进度微调器，但我无法做到.我已经搜索过谷歌，但没有任何事情让我这样做.请帮助我实现这一目标.
代码:
登录.component.ts
userLogin() {console.log('登录');this.eService.signIn(this.user_name, this.password).订阅(数据 =>{控制台日志(数据)；this.admin = 数据；if ( this.admin.firstLogin === true) {//去更新管理员密码} 别的 {this.router.navigate(['/dashboard']);}localStorage.setItem('isLoggedin', 'true');});}
登录.html
<div class="row justify-content-md-center"><div class="col-md-4"><img src="assets/images/logo.png" width="150px" class="user-avatar"/><h1>用户/h1><表单角色=表单"><div class="form-content"><div class="form-group"><input type="text" name="username" [(ngModel)]="user_name" class="form-control input-underline input-lg" id="" placeholder="username">
<div class="form-group"><input type="password" name="password" [(ngModel)]="password" (keyup.enter)="userLogin()" class="form-control input-underline input-lg" id=""占位符=密码">
<a class="btn rounded-btn"(点击)="userLogin()">登录 </a> <a class="btn rounded-btn" >Clear</a></表单>
所以当我请求登录服务时，我想显示微调器，请帮助我，我该怎么做?
我知道这对这里的许多开发人员来说很简单，但对我来说却有点困难.
解决方案
将微调器添加到您的 HTML 代码中，如下所示:
<img *ngIf="loading" src="assets/my-spinner.gif"/><!-- 或者，如果您愿意，也可以使用 CSS 之一 -->
然后，在您的 Typescript 中，您需要创建一个名为 loading 的变量，并像这样设置:
userLogin() {console.log('登录');this.loading = true;//添加这一行this.eService.signIn(this.user_name, this.password).订阅(数据 =>{控制台日志(数据)；this.loading = false;//和这个this.admin = 数据；if ( this.admin.firstLogin === true) {//去更新管理员密码} 别的 {this.router.navigate(['/dashboard']);}localStorage.setItem('isLoggedin', 'true');});}
这将在服务运行时将 loading 设置为 true
I am new to angular and web development but able to design various web pages and got data from the server using HTTP client module.
While getting data from server I want to show progress spinner, but I am not able to do it. I have searched google but nothing made me to do it. Please help me to achieve this.
Code:
login.component.ts
userLogin() {
console.log('logging in');
this.eService.signIn(this.user_name, this.password)
.subscribe(
data => {
console.log(data);
this.admin = data;
if ( this.admin.firstLogin === true) {
// go to update admin password
} else {
this.router.navigate(['/dashboard']);
}
localStorage.setItem('isLoggedin', 'true');
}
);
}
login.html
<div class="login-page" [@routerTransition]>
<div class="row justify-content-md-center">
<div class="col-md-4">
<img src="assets/images/logo.png" width="150px" class="user-avatar" />
<h1>Users/h1>
<form role="form">
<div class="form-content">
<div class="form-group">
<input type="text" name="username" [(ngModel)]="user_name" class="form-control input-underline input-lg" id="" placeholder="username">
</div>
<div class="form-group">
<input type="password" name="password" [(ngModel)]="password" (keyup.enter)="userLogin()" class="form-control input-underline input-lg" id="" placeholder="password">
</div>
</div>
<a class="btn rounded-btn" (click)="userLogin()"> Log in </a>
<a class="btn rounded-btn" >Clear</a>
</form>
</div>
</div>
</div>
So when I am requesting signIn service I want to show the spinner, Please help me, how can I do it?
I know this is simple for many of the developers here, but for me It is getting somewhat tough.
解决方案
Add the spinner into your HTML code, like so:
<img *ngIf="loading" src="assets/my-spinner.gif" /> <!-- Or use a CSS one if you like -->
Then, in your Typescript, you need to create a variable called loading, and set it like so:
userLogin() {
console.log('logging in');
this.loading = true; // Add this line
this.eService.signIn(this.user_name, this.password)
.subscribe(
data => {
console.log(data);
this.loading = false; // And this one
this.admin = data;
if ( this.admin.firstLogin === true) {
// go to update admin password
} else {
this.router.navigate(['/dashboard']);
}
localStorage.setItem('isLoggedin', 'true');
}
);
}
This will set loading to true while the service is in action
这篇关于如何以角度 6 显示微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
