angular的数据绑定条件判断

简介: 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() {
  }
}


相关文章
|
JavaScript 前端开发
Angular数据绑定的学习笔记
https://angular.io/guide/property-binding
Angular数据绑定的学习笔记
Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论
Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论
113 0
Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论
Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论
Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论
Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论
|
Web App开发 开发者
Angular 父子Component的数据绑定实现
Angular 父子Component的数据绑定实现
103 0
Angular 父子Component的数据绑定实现
|
JavaScript 前端开发
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
76 0
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
|
JavaScript 前端开发
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
68 0
一段简单的JavaScript代码,模拟Angular数据绑定信息的解析和替换
Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论
Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论
Angular应用从Component到Html的数据绑定是如何实现的 -数据流的讨论
|
Web App开发 JavaScript 前端开发
第217天:深入理解Angular双向数据绑定的原理
一、理解angular双向数据绑定 双向绑定是新的前端框架中频繁出现的一个新词汇,也是mvvm的核心原理。angularjs五条核心信念中的数据驱动,便是由双向绑定进行完成。 那么什么是双向绑定,下面简单进行讲解。
3953 0

热门文章

最新文章