Angular+ionic 相关用法

最新推荐文章于 2024-03-05 21:27:49 发布

原创最新推荐文章于 2024-03-05 21:27:49 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

代码专栏收录该内容

36 篇文章

订阅专栏

本文深入探讨了Angular中的核心指令，包括[ngStyle]和[ngClass]的使用技巧，如条件样式应用、循环列表样式控制，以及[ngModel]的数据双向绑定机制。同时，介绍了[ngSwitch]和*ngIf、*ngFor等指令在动态渲染和列表展示中的应用。

[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>