[Angular] 笔记 3：ngIf

ngIf 是 Angular 的行为指令。
基本写法：

{{ hero.name }}

当 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

相关推荐: 39. 干货系列从零用Rust编写负载均衡及代理，正则及格式替换

wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器，四层TCP/UDP转发，七层负载均衡，内网穿透，后续将实现websocket代理等，会将实现过程分享出来，感兴趣的可以一起造个轮子 项目地…