如何在角度6中显示微调器 [英] How to show spinner in angular 6

问题描述

我不熟悉语言开发和Web开发，但能够设计各种Web页面并使用HTTP客户端模块从服务器获取数据.

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.

代码:

login.component.ts

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

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>
                &nbsp;
                <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.

推荐答案

将微调框添加到您的HTML代码中，如下所示:

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 -->

然后，在Typescript中，您需要创建一个名为loading的变量，并进行如下设置:

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');
         }
    );
}

这将在服务运行时将loading设置为true

This will set loading to true while the service is in action

这篇关于如何在角度6中显示微调器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！