Question

我正在建立一个角度为6的登录页面。登录应该是可配置的，可以是使用用户名和密码的标准登录，也可以是单点登录。在服务器端存在一个rest接口，用于提供配置。

页面应显示有关SSO的其他元素，或者已选择标准登录。因此，我的HTML组件中有一个简单的ngIf元素。

<mat-card class="center">
  <mat-card-content>
    <div fxLayout="row" fxLayoutAlign="center" *ngIf="ssoEnabled; then ssoLogin; else devLogin"></div>
  </mat-card-content>

</mat-card>

<ng-template #ssoLogin>
  <a href="someLink" fxFlex mat-raised-button color="primary">LOGIN-SSO</a>
</ng-template>

<ng-template #devLogin>
  <button fxFlex mat-raised-button color="primary" (click)="login()">LOGIN</button>
</ng-template>

'ssoEnabled'变量通过ngOnInit（）方法在component.class中初始化：

export class LoginComponent extends BaseComponent {
  public ssoEnabled: boolean;

  //constructor and other content

  ngOnInit(): void {
    this.http.get('/config/sso/enabled').subscribe(value => this.ssoEnabled = Boolean(value));
  }
}

我的问题是，现在呈现页面时，变量“ ssoEnabled”始终未定义，而我的ngIf是无用的。我认为该页面是在http调用返回之前呈现的。我在ngOnInit函数中尝试了几项操作，例如管道或异步/等待模式，但变量始终保持未定义状态。

有人为此提供解决方案吗？也许还有针对我的用例的更好的解决方案？

Answer 1

这是因为订阅是异步功能。渲染页面，然后才能得到其余答案。您可以通过以下方式在类中定义ssoEnabled：

public ssoEnabled = false;

您必须选择默认行为false或true并使用它！祝你好运！

通过rest config

1 个答案: