0

我正在尝试在按钮内实现 Nebular Spinner，但它不起作用。单击按钮后，微调器应显示在按钮内，只是它不会

我不知道为什么它不起作用。我按照 Nebular GitHub 中给出的示例无济于事。

当我在点击事件中更改微调器标志的值时，微调器应该在单击按钮时显示。这是代码

<button nbButton status="danger" [nbSpinner]="isWorking" nbSpinnerStatus="danger" type="submit"
                  [disabled]="!loginForm.valid" class="btn btn-block m-t-40 login-input login-input-button">
         Sign In
    </button>


    login(): void {
    this.isWorking = true;

    this.authService.login(credentials)
      .subscribe(
        (res: any) => {
          // tslint:disable-next-line: no-console
          console.log(res);
          this.router.navigate(['/']);
          this.isWorking = false;
        }
      );
  }
4

2 回答 2

1

你初始化变量了isWorking吗？您应该在方法中将该变量初始化为 false OnInit。

<button nbButton status="danger" [nbSpinner]="isWorking" nbSpinnerStatus="danger" type="submit" (click)="login()" [disabled]="!loginForm.valid" class="btn btn-block m-t-40 login-input login-input-button">
         Sign In
</button>

...在 .ts 中

    export class xxx implements OnInit {
      isWorking = false;
    // ...
      login(): void {
          this.isWorking = true;

          this.authService.login(credentials)
            .subscribe(
              (res: any) => {
                // tslint:disable-next-line: no-console
                console.log(res);
                this.router.navigate(['/']);
                this.isWorking = false;
              }
            );
        }
      }
    }

于 2020-07-15T17:30:12.197 回答
0

这似乎适用于 component.html：

   <button nbButton status="danger" [nbSpinner]="isWorking" nbSpinnerStatus="danger" (click)="login()" class="btn btn-block m-t-40 login-input login-input-button">
  Sign In
</button>

请不要忘记在使用该组件的当前模块中导入 nbButton 和 nbSpinner，例如：

   import {
  NbButtonModule,
  NbSpinnerModule,
} from '@nebular/theme';

    @NgModule({
  imports: [
    NbButtonModule,
    NbSpinnerModule
  ]
于 2020-04-07T09:19:07.763 回答