//条件判断:*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>
数据定义,事件都写在这个文件里
// 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() {
}
}