[ngStyle]
基本用法
<div [ngStyle]="{'background-color':'green'}"></<div>
判断添加
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
[ngClass]
1.第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类
基本用法
[ngClass]="{'text-success':true}"
2.判断
[ngClass]="{'text-success':username == 'zxc'}"
[ngClass]="{'text-success':index == 0}"
3、例子循环显示的第一行添加text-danger样式,文字变红色
const arr = [1, 3, 4, 5, 6]
<ul>
<li *ngFor="let item of arr, let i = index">
<span [ngClass]="{'text-danger': i==0}">{{item}}</span>
</li>
</ul>
[ng-model]
是数据的双向绑定,下面的例子中ion-datetime组件中的值和.ts文件中的curDate值相互绑定
.html
<ion-item>
<ion-label position="floating">MM/DD/YYYY</ion-label>
<ion-datetime displayFormat="YYYY/MM/DD" [(ngModel)]="curDate" [pickerOptions]="customPickerOptions"></ion-datetime>
</ion-item>
.ts
private curDate = "2020-5-20";
[ng-value]
用于设置 input 或 select 元素的 value 属性,ionic4中没找到
[ngSwitch] && [ngSwitchCase]
<div [ngSwitch]="chart">
<div *ngSwitchCase="'home'">
home
</div>
<div *ngSwitchCase="'heart'">
heart
</div>
<div *ngSwitchCase="'pin'">
pin
</div>
</div>
*ngIf
判断,返回true则显示,false则不显示
<ion-row *ngIf="roleId==3">
*ngFor
显示list列表中所有数据
<ion-card-content *ngFor="let item of List">
***
</ion-card-content>