我正在构建一个带有角度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模式,但变量总是保持未定义。
有人为此解决了问题吗?也许我的用例也有更好的解决方案?
因为subscribe是异步函数。在从休息中获得答案之前,您将呈现页面。您可以通过以下方式在类中定义ssoEnabled:
public ssoEnabled = false;
您必须选择默认行为false或true并使用它!祝好运!