ngClass第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类
[ngClass]="{'text-success':index == 0}"
ngStyle没有判断
<div [ngStyle]="{'background-color':'green'}"></<div>
ngStyle有判断
<div [ngStyle]="{'background-color':username === 'zxc' ? 'green' : 'red' }"></<div>
<ion-col col-4 *ngFor="let item of rmpp ;let i = index" (click)="choose(item.id)"> <button id="{{item.id}}" ion-button small outline [ngClass]="{'active':i === 0}">{{item.name}}</button></ion-col>
<ion-col col-4 *ngFor="let item of rmpp ;let i = index" (click)="choose(item.id)"> <button id="{{item.id}}" ion-button small outline [ngStyle]="{'color':i=== 0 ? 'green' : 'red' }">{{item.name}}</button></ion-col>
ngClass第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类[ngClass]="{'text-success':index == 0}"ngStyle没有判断<div [ngStyle]="{'background-color':'green'}"></<div>ngStyle有判断<div [ngStyle]="{'background-color':use
div [
ng
Style
]="{'background-color':'green'}">div>
2、
ng
Class
第一个参数为类名称,第二个参数为boolean值,如果为true就添加第一个参数的类
基本
用法
[
ng
Class
]="{'text-success':true}"
[
ng
Class
]="{'text-success':u
我是代码html <p
ng
-
class
="{true: 'done', false: ''}[info.scheduleState == 'done']">{{ info.scheduleDes }}</p>css.done {
text-decoration: line-through
这个就可以根据info.scheduleState == 'done' 表达式的值控制标签样式。。效
最近在
学习
ionic
时一直遇到要动态控制元素样式的情况,在实践后总结了三种比较方便的方法
(一)通过 document.getElementById(id) 来动态控制元素样式
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。因此,在操作一个特定的元素时,我们可以通过id来动态控制元素样式。具体代码如下:
//在ts文件中,我们可以通过boxShadow来...
3. 在需要使用相机的组件中导入相机插件,并注入到构造函数中:
import { Camera, CameraOptions } from '@
ionic
-native/camera/
ng
x';
constructor(private camera: Camera) { }
4. 在需要打开相册的方法中,调用相机插件的getPicture()方法:
ope
nG
allery() {
const options: CameraOptions = {
quality: 100,
destinationType: this.camera.DestinationType.DATA_URL,
sourceType: this.camera.PictureSourceType.PHOTOLIBRARY,
encodi
ng
Type: this.camera.Encodi
ng
Type.JPEG,
mediaType: this.camera.MediaType.PICTURE
this.camera.getPicture(options).then((imageData) => {
// imageData is a base64 encoded stri
ng
let base64Image = 'data:image/jpeg;base64,' + imageData;
// 上传图片的代码
}, (err) => {
console.log(err);
5. 在上传图片的代码中,将base64格式的图片数据发送到服务器即可。
注意:在使用相机插件之前,需要在config.xml文件中添加以下权限:
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:requestLegacyExternalStorage="true" />
</edit-config>
这样才能在Android 10及以上版本的设备上正常使用相机和相册功能。