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 = truebool = falsengOnInit() {}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！