angular - 如何以 Angular 6 显示微调器

Question

我是 Angular 和 Web 开发的新手，但能够设计各种网页并使用 HTTP 客户端模块从服务器获取数据。

从服务器获取数据时，我想显示进度微调器，但我无法做到。我已经搜索了谷歌，但没有什么让我这样做。请帮助我实现这一目标。

代码:

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>
                &nbsp;
                <a class="btn rounded-btn" >Clear</a>
            </form>
        </div>
    </div>
</div>

所以当我请求登录服务时，我想显示微调器，请帮助我，我该怎么做？

我知道这对这里的许多开发人员来说很简单，但对我来说有点困难。

Answer 1

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

<img *ngIf="loading" src="assets/my-spinner.gif" /> <!-- Or use a CSS one if you like -->

然后，在您的 Typescript 中，您需要创建一个名为 loading 的变量，并将其设置为:

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