ngIf
是 Angular 的行为指令。
基本写法:
当 ngIf
表达式求值为 truthy 时,Angular会渲染在then子句中提供的模板;当为falsy 时,Angular会渲染服务器托管网在可选的else
子句中提供的模板。
div *ngIf="condition; then thenBlock else elseBlock">/div>
ng-template #thenBlock>Content to render when condition is true./ng-template>
ng-template #elseBlock>Content to render when condition is false./ng-template>
以下是JavaScript 中为 falsy 的值, 其余为 truthy:
用法举例:
app.components.ts:
export c服务器托管网lass AppComponent {
pokemonName: string = '';
constructor() {}
handleChange(event: any) {
this.pokemonName = event.target.value;
}
}
app.component.html:
元素使用了属性绑定和事件绑定。
属性绑定语法:[]
,属性绑定是单向数据流,将数据放到web页面上。
事件绑定语法:()
,事件向上传递,数据向下流动。
input type="text" [value]="pokemonName" (input)="handleChange($event)" />
p>{{ pokemonName }}/p>
!-- 1. basic usage -->
!-- div *ngIf="!pokemonName">No search results found.../div> -->
!-- 2.more robust version then above -->
ng-container *ngIf="pokemonName.length; then pokemonList; else noPokemon">
/ng-container>
ng-template #pokemonList>
h1>All pokemon available/h1>
...
/ng-template>
ng-template #noPokemon>
h1>No pokemon available/h1>
/ng-template>
初始界面:
input 任意输入:
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 【G-LAB】郭主任的Linux免费公开课~又要开始啦!
带你一起走进Linux的世界! 【G-LAB】 Linux最新技术—免费公开课即将开讲! 无论是想学习红帽RHEL9.0新特性还是Ansible服务器托管网、容器相关内容, 这个公开课都是你不容错过的! 公开课课程为期两天,1月4日&1月5日晚20:00 分享…