小编Fao*_*uzi的帖子

如何使 Ionic 4 ion-col 具有相同的高度

我有一个带有主卡片的页面,其中包含网格内的其他小卡片。我希望所有列都具有相同的高度,这将是特定行内列之间的最大高度。

这是我的模板和样式:

<ion-card color="blue">
  <ion-card-content class="welcome-card-content">
    <ion-grid class="ion-no-padding">
      <ion-row >
        <ion-col >
            <ion-card color="white-blue"class="small-card">
                <ion-card-content class="white-text">
                  <ion-row class="ion-justify-content-center">
                    <ion-icon class="home-icons" name="flash"></ion-icon>
                  </ion-row>
                   <ion-row  class="ion-justify-content-center">
                      <ion-text >a very long text that takes a lot of vertical space</ion-text>
                   </ion-row>

                </ion-card-content>
            </ion-card>
        </ion-col>
        <ion-col>
            <ion-card color="white-blue" class="small-card">
                <ion-card-content class="white-text">
                  <ion-row class="ion-justify-content-center">
                    <ion-icon class="home-icons" name="add"></ion-icon>
                  </ion-row>
                   <ion-row  class="ion-justify-content-center">
                      <ion-text >simple text</ion-text>
                   </ion-row>

                </ion-card-content>
            </ion-card>
          </ion-col>
      </ion-row>
    </ion-grid>
 </ion-card-content>
</ion-card>
Run Code Online (Sandbox Code Playgroud)

css文件

.small-card{
  margin: 3px;
  height: inherit;
}


 ion-col{
   margin: 0px;
   padding: 0px;
   height: 100%;
 } …
Run Code Online (Sandbox Code Playgroud)

css ionic-framework ionic4

4
推荐指数
1
解决办法
3193
查看次数

使用 Ionic 4 捕获图像并将其上传到服务器

我一直在尝试捕获图像并将其上传到服务器几天但没有运气。我的客户端使用 Ionic 4,后端使用 Java(我使用 Jersey 将后端暴露给 REST)。

现在,问题是在拍摄图像并尝试上传后,我的后端不断收到空值。

这是我的客户端代码:

    openCam(){
    const options: CameraOptions = {
      quality: 100,
      destinationType: this.camera.DestinationType.FILE_URI,
      encodingType: this.camera.EncodingType.JPEG,
      mediaType: this.camera.MediaType.PICTURE,
      correctOrientation: true,
      cameraDirection: 1
    }

    this.camera.getPicture(options).then((imageData) => {
     // imageData is either a base64 encoded string or a file URI
     // If it's base64 (DATA_URL):
     //alert(imageData)
     this.imageData = imageData;
     this.image=(<any>window).Ionic.WebView.convertFileSrc(imageData);
     this.isImageCaptureed = true;

    }, (err) => {
     // Handle error
     alert("error "+JSON.stringify(err))
    });
  }


    upload(){
      let  url = 'http://mydommain/api/upload';
      let dataURL  = 'data:image/jpeg;base64,' + this.imageData;
      let  postData …
Run Code Online (Sandbox Code Playgroud)

rest jersey typescript angular ionic4

2
推荐指数
1
解决办法
1万
查看次数

如何从主选择页面隐藏离子标签并仅在选择模式标题上显示它

上下文:我有一个经过身份验证的用户遵循的课程列表。我希望能够在 ion-title 标题中显示所有课程的标题,并在页面内容中显示与所选课程相关的详细信息。

问题:我想在 ion-title 中仅显示当前课程名称而不添加标签,并仅在选择模式标题上显示标签“课程列表”。我尝试删除离子标签,但显示选择模式无标题..

这就是我想要的:标题:

在此输入图像描述

选择模态:

在此输入图像描述

这就是我得到的:

保留离子标记时

在此输入图像描述

去除离子标记时

在此输入图像描述

我的代码:

<ion-item lines="none">
     <ion-label>Courses List</ion-label>
     <ion-select [(ngModel)]="course.id" (ionChange)="selectcourse($event)">
      <ion-select-option *ngFor="let course of courses" [value]="course.id">
       {{course.title}}
      </ion-select-option>
    </ion-select>
 </ion-item>
Run Code Online (Sandbox Code Playgroud)

html css ionic-framework ionic4

2
推荐指数
1
解决办法
2995
查看次数

标签 统计

ionic4 ×3

css ×2

ionic-framework ×2

angular ×1

html ×1

jersey ×1

rest ×1

typescript ×1