angular的数据绑定条件判断

html文件

//条件判断：*ngIf是直接影响元素手否被渲染，而非控制元素的显示和隐藏
//*ngIf=“”   html文件
<div *ngIf="falg">
    <p>falg为true</p>
</div>
<div *ngIf="bool">
    <p>bool为false</p>
</div>

循环语句：*ngFor 
<div *ngFor="let item of colors ">
    {{item}}
</div>

Switch语句：[ngSwitch]=”变量“
<div [ngSwitch]="isMax">
    <p *ngSwitchCase="true">
        true
    </p>
    <p *ngSwitchCase="false">
        false
    </p>
    <p *ngSwitchDefault>
        默认
    </p>
</div>

事件绑定:(事件类型)="方法名"
<input #userName type="text" (keyup)="keyUpFn($event)">
<div (click)="keyUpFn($event)" *ngFor="let item of colors ">
    {{item}}
</div>

<!-- 模板引用变量 -->：#name
<button (click)="getUserName(userName.value)">获取userName</button>

xxxxxx.component.ts文件

数据定义，事件都写在这个文件里

// component.ts文件  
import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-my-test',
  templateUrl: './my-test.component.html',
  styleUrls: ['./my-test.component.css']
})
export class MyTestComponent implements OnInit {
  falg = true
  bool = false
  ngOnInit() {
  }
}