在 angular 中使用 *ngIf 和 else 时出错

大佬教程收集整理的这篇文章主要介绍了在 angular 中使用 *ngIf 和 else 时出错，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决在 angular 中使用 *ngIf 和 else 时出错？

开发过程中遇到在 angular 中使用 *ngIf 和 else 时出错的问题如何解决？下面主要结合日常开发的经验，给出你关于在 angular 中使用 *ngIf 和 else 时出错的解决方法建议，希望对你解决在 angular 中使用 *ngIf 和 else 时出错有所启发或帮助；

这是我的 app.component.ts 文件

import { Component } from '@angular/core';

@Component({
  SELEctor: 'app-root',templateUrl: './app.component.HTML',styleUrls: ['./app.component.CSS']
})
export class AppComponent {
  public title:string = 'angularapp';

public username:string='root';
public password:string='root';

}
@H_616_7@
这是我的 app.component.HTML
<div *ngIf="username=='root' && password=='root'; else elseBlock">

  <h3>Login suceess</h3>

  <ng-template #elseBlock>
    <h3>Login Failed</h3>
  </ng-template>
</div>
@H_616_7@
将 elseBlock 添加到 *ngIf 时出现错误
这是错误
Error: src/app/app.component.HTML:1:56 - error TS2339: Property 'elseBlock' does not exist on type 'AppComponent'.

1 <div *ngIf="username=='root' && password=='root'; else elseBlock">
                                                         ~~~~~~~~~

  src/app/app.component.ts:5:16
    5   templateUrl: './app.component.HTML',~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.
@H_616_7@ 
解决方法

        
您的 elseBlock 不能位于 *ngIf 管理的块内。
正确的模板应如下所示：
<div>This text is all in one div element <span class="underline-me">even though this part is underlined</span> so it will flow without needing to change the display property</div>@H_616_7@
      ,
        
你甚至不需要 ngIf。您可以使用三元运算符解决它：
<h3> 
  {{ ((username === 'root') && (password === 'root')) ? 'Login success' : 'Login failed'
</h3>
@H_616_7@
      
 


 
 
      
大佬总结
       
以上是大佬教程为你收集整理的在 angular 中使用 *ngIf 和 else 时出错全部内容，希望文章能够帮你解决在 angular 中使用 *ngIf 和 else 时出错所遇到的程序开发问题。
		
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
		
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。