angular *ngIf 和 *ngIf else的用法 (举例)

举个栗子:
点击删除评论,删除后新增按钮(点击撤回)

html:

<button (click)="delComment()">删除</button>
<textarea *ngIf="Comment ; else Donotdel">每个人心里都有一团火,路过的人只看到烟</textarea>

//固定样式 ng-complate标签包裹else的情况 #跟else后的变量名
	<ng-template #Donotdel>
	//else的情况是 新增一个撤回按钮 点击后显示刚刚删除的内容
	<button (click)="withDrow()">撤回删除</button>
	</ng-template>

ts文件:

export class MyownComponent{	
//默认显示评论
Comment=true;
//点击删除按钮
delComment(){
this.Comment=false;
}
点击撤回按钮
withDrow(){
this.Comment=true;
}

}

效果
在这里插入图片描述

在这里插入图片描述

### 关于 Angular 的 `*ngIf` 指令 在 Angular 中,`*ngIf` 是一种结构型指令,用于条件渲染 DOM 元素。当指定的布尔表达式求值为真时,该指令会动态地向 DOM 添加或从中移除元素[^1]。 以下是关于如何使用 `*ngIf` 的一些常见场景: #### 基本语法 ```html <div *ngIf="condition">This content is shown if condition evaluates to true.</div> ``` 如果 `condition` 表达式的值为 `true`,则上述 `<div>` 将被呈现到页面上;否则它会被从 DOM 移除。 #### 使用模板变量 有时可能需要访问由 `*ngIf` 创建的上下文中定义的对象。可以利用模板变量来实现这一点: ```html <div *ngIf="user as currentUser"> Hello {{currentUser.name}}! </div> ``` 这里通过 `as` 定义了一个名为 `currentUser` 的局部变量,从而可以在模板内部更方便地引用对象属性[^2]。 #### 复杂逻辑处理 对于更加复杂的条件判断情况,可以通过嵌套多个 `*ngIf` 或者结合其他操作符一起工作。例如: ```html <div *ngIf="isLoggedIn(); else guestTemplate"> Welcome back, user. </div> <ng-template #guestTemplate> Please log in first. </ng-template> ``` 在这个例子中,调用了组件方法 `isLoggedIn()` 来决定是否展示登录后的欢迎消息还是未登录状态下的提示信息[^3]。 另外需要注意的是,在某些情况下为了优化性能或者避免不必要的重新计算,推荐将复杂函数替换为简单的成员变量赋值形式。 #### 结合样式控制 除了单纯显示/隐藏外,还可以配合 CSS 类来进行进一步定制外观效果: ```css .hidden { display: none; } ``` ```typescript import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: './example.component.html' }) export class ExampleComponent { showElement = false; toggleVisibility() { this.showElement = !this.showElement; } } ``` ```html <button (click)="toggleVisibility()">Toggle Visibility</button> <div [class.hidden]="!showElement" *ngIf="showElement">Visible Content</div> ``` 此代码片段展示了如何根据按钮点击事件切换元素可见性的同时应用额外的CSS类名管理视觉表现[^4]。 ### 总结 综上所述,`*ngIf` 提供了一种强大而灵活的方式来基于特定条件下调整视图内容。无论是简单的情况还是涉及多层分支决策的情形下都能很好地胜任任务需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值