标签: ionic4

我试图通过更改 css4 变量来更改输入字段的填充，但我一定是做错了什么，因为填充没有改变。我还在习惯 css4。这是我的 scss 文件。

app-page {
    --padding-end: 50px;

    ion-input{
        padding: var(--padding-end);
    }
}

我正在尝试离子4中的离子滚动，但无法正常工作？我从ionic论坛获得了一些解决方案，请使用div而不是已弃用的ion-scroll，但它对我不起作用。我需要在单行中滚动显示卡片项目。

任何人都可以帮助我吗：我已经在'global.scss'中添加了这个

.tab-btn-selected {
    background: rgb(134,31,194);
    color: rgb(134,31,194);
    --color-selected: rgb(134,31,194);
}

.tab-btn-selected[aria-selected=true] {
    color: #fff; /*your  text color */
    background: rgb(134,31,194); /* your background color*/
}

但没有任何改变。

我想知道如何将此标签栏的背景颜色更改为 Ionic 4。

我试图添加--background: white;in ion-tab/ion-tabs 但它不起作用。

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="About" icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Contact" icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

我对这个新的 Ionic 4 很好奇 :( 请帮忙...

我已经疯了...一个需要帮助消除来自边境ion-toolbar的ion-header中离子V4（4.0.9）。

我的目标是删除此：

在我的代码中，我有ion-header两个ion-toolbar

<ion-header no-border-bottom no-border-top no-border>
  <ion-toolbar color="dark" no-border-bottom no-border-top no-border>
    <img src="../../assets/icoUserLogin.png" alt="Logo Aikox" slot="start" witdh="20%" />
    <ion-title slot="primary">
      Test
    </ion-title>
  </ion-toolbar>
  <ion-toolbar class="ToolbarVerde" color="medium" no-border-bottom no-border-top no-border>
    <ion-buttons slot="start">
      <img src="../../assets/icoListado.png" alt="Icono Listado" slot="start" width="70%" />
    </ion-buttons>
    <ion-title>
      <span>test</span>
      <br />
      <span>test</span>
    </ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="Nuevo()">
        <img src="../../assets/icoRefresh.png" alt="Icono Recargar" width="70%" /><br />
      </ion-button>
      <ion-button (click)="Nuevo()">
        <img src="../../assets/icoNew.png" alt="Añadir Parte de Trabajo" width="70%" /><br />
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header> …

自从在ionic 4中使用QR码扫描应用程序以来，我不断收到如下错误：

错误：模板解析错误：无法绑定到“ qrc-value”，因为它不是“ ngx-qrcode”的已知属性。1.如果“ ngx-qrcode”是Angular组件，并且具有“ qrc-value”输入，则请验证它是否是此模块的一部分。2.如果“ ngx-qrcode”是Web组件，则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schemas”以禁止显示此消息。3.要允许任何属性，请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。（“

<ion-card *ngIf="createdCode">
<ngx-qrcode [ERROR ->][qrc-value]="createdCode"></ngx-qrcode>
<ion-card-content>

请帮我解决这个问题。

因此，我正在尝试将离子幻灯片导入到我的项目中，但是却收到此消息：“ ...没有导出的成员'幻灯片'”

我这样输入：

import { Slides } from '@ionic/angular';

然后剩下的代码：

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild("audio") audio;
  @ViewChild(Slides) slides: Slides;

  constructor(public navCtrl: NavController) {

  }

  ngAfterViewInit() {

    let self = this;

    this.audio.nativeElement.oncanplaythrough = () => {

      this.audio.nativeElement.onplay = function () {

        self.slides.autoplay = 1000;
        self.slides.startAutoplay();

      };

      this.audio.nativeElement.onpause = function () {

        self.slides.autoplay = undefined;
        self.slides.stopAutoplay();

      };

    };
  }

}

我在Ionic 4应用程序中工作，并且已经将幻灯片导入了我的应用程序，但显示错误。

这是我的intro.page.ts：

import { Slides } from '@ionic/angular';
@Component({
  selector: 'app-intro',
  templateUrl: './intro.page.html',
  styleUrls: ['./intro.page.scss'],
})
export class IntroPage implements OnInit {
  @ViewChild('slides') slides: Slides;
  constructor(private storage: Storage, private router: Router) { }

  ngOnInit() {
  }

  next() {
    this.slides.slideNext();
  }
}

错误：

模块'“ ../../../../../Users/challengesnew/node_modules/@ionic/angular/dist/core”'没有导出的成员'Slides'。

任何帮助深表感谢。

我想在ionic 4中提供警报控制器样式，这是我的演示代码，

async presentalert() {
    const alert = await this.alertCtrl.create({
      header: '  DO YOU WANT TO CANCEL',
      message: 'DO YOU WANT TO CANCEL',
      cssClass: 'alertCancel',
      mode: 'ios',
      buttons: [
        {
          text: 'NO',
          role: 'cancel',
          cssClass: 'alertButton',
          handler: () => {
            console.log('Confirm Cancel');
          }
        }, {
          text: 'YES',
          cssClass: 'alertButton',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    })
    await alert.present();
  }

我试图在global.scss中应用scss

 .alertCancel{
    --background: red;
  }
  .alertButton {
     background-color: white !important;
  }

我已经尝试了所有可能的方法来在警报控制器中提供CSS，但是它无法正常工作，因此请帮助我，我被困在这里。

我有以下代码：

   if (this.places.length) {
    console.log(this.places);
    var myData = this.places.map(({ points }) => points);
    var myTotal = 0;  // Variable to hold your total

    for(var i = 0, len = myData.length; i < len; i++) {
        myTotal += myData[i][1];  // Iterate over your first array and then grab the second element add the values up
    }
    console.log(myTotal);
  }

我有一个对象 ，我需要从该对象中提取所有数组，并从该数组中仅提取一个特定值，例如点。

主要目标是将所有点求和并保存到一个新变量中。上面的代码不起作用。