通过rest config动态构建角度页面

问题描述 投票:0回答:1

我正在构建一个带有角度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函数中尝试了几个东西,比如管道或async / await模式,但变量总是保持未定义。

有人为此解决了问题吗?也许我的用例也有更好的解决方案?

angular typescript
1个回答
0
投票

因为subscribe是异步函数。在从休息中获得答案之前,您将呈现页面。您可以通过以下方式在类中定义ssoEnabled:

public ssoEnabled = false;

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

© www.soinside.com 2019 - 2024. All rights reserved.