Arahan 'Slide' tak terduga yang diimpor oleh modul 'AppModule'. Silakan tambahkan anotasi @NgModule

Saya mencoba membuat aplikasi yang sangat sederhana (ionic 3.19): menggunakan kamera ponsel untuk mengambil gambar dengan mengklik tombol, menyimpannya dalam array dan kemudian menampilkannya seperti carousel melalui komponen Slides. Namun mendapatkan kesalahan seperti judulnya. Kode:

app.module.ts, tempat mengimpor Slide dari ionic-angular

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

import { Slides } from 'ionic-angular';
import { Camera } from '@ionic-native/camera';


@NgModule({
  declarations: [
    MyApp,
    HomePage
        
    
  ],
  imports: [
    BrowserModule,
    Slides,
    IonicModule.forRoot(MyApp)    
       
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage    
        
  ],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,  
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.ts, berisi fungsi untuk mengambil gambar

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';

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

  
  public image: string = null;
  public base64Image: string[];
  public extraOptions : {};

  constructor(private camera: Camera) {
    this.base64Image = new Array();
    this.extraOptions = {
      pager: true,
      paginationClickable: true,
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: 2000
      }
  }  

  takePicture() {
    let options: CameraOptions = {
      destinationType: this.camera.DestinationType.DATA_URL,
      targetWidth: 1000,
      targetHeight: 1000,
      quality: 100
    }
    this.camera.getPicture( options )
    .then(imageData => {
      this.image = 'data:image/jpeg;base64,${imageData}';
      this.base64Image.push(imageData);
      let iData = this.base64Image.map(o => o).join(', ');
      console.log("iData is " + iData);
    })
    .catch(error =>{
      console.error( error );
    });
  } 

    
}

rumah.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Manage your photos!
    </ion-title>    
  </ion-navbar>
</ion-header>

<ion-content padding>    
        <button ion-button block (click)="takePicture()">Photo</button>
        <!--<img [src]="image" *ngIf="image" />-->
        <div *ngIf="base64Image.length == 0"> <br/><br/> &nbsp; &nbsp;Click on the camera icon to take pictures!</div>
        <ion-slides pager autoplay="true" pager="true" [options]="extraOptions" *ngIf="base64Image.length > 0">
          <ion-slide *ngFor="let image of base64Image">
            <img [src]="image" />
          </ion-slide>
        </ion-slides>
</ion-content>

Ada ide? Terima kasih banyak!


ionic-framework ionic3
person JoseRM    schedule 02.10.2018    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Tidak perlu mengimpor Slide di app.module.ts, impor langsung ke dalam komponen:

import { Slides } from 'ionic-angular';

dan jangan lupa menambahkan Slides sebagai ViewChild di komponen:

@ViewChild(Slides) slides: Slide

Baca selengkapnya di dokumen resmi.

person theriddle2    schedule 02.10.2018
comment
Setelah memasukkan pernyataan import dan @ViewChild di home.ts (dan menghapus impor dari app.module.ts), saya mendapatkan: Kesalahan penguraian template: Tidak dapat mengikat ke 'opsi' karena ini bukan properti 'ion' yang diketahui -slide'. 1. Jika 'ion-slide' adalah komponen Angular dan memiliki masukan 'opsi', verifikasi bahwa itu adalah bagian dari modul ini. 2. Jika 'ion-slide' adalah Komponen Web, tambahkan 'CUSTOM_ELEMENTS_SCHEMA' ke '@NgModule.schemas' komponen ini untuk menyembunyikan pesan ini. 3. Untuk mengizinkan properti apa pun, tambahkan 'NO_ERRORS_SCHEMA' ke '@NgModule.schemas' komponen ini. - person JoseRM; 03.10.2018
comment
Itu berhasil. Di baris home.html ‹ion-slides pager autoplay=true pager=true [options]=extraOptions *ngIf=base64Image.length › 0› [options] seharusnya menjadi opsi. - person JoseRM; 06.10.2018