Question

我正在尝试构建一个非常简单的应用程序（离子3.19）：使用电话摄像头单击按钮拍照，将其保存在数组中，然后通过Slides组件像轮播一样显示。但是标题出现错误。代码：

app.module.ts，其中从离子角导入幻灯片

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，包含拍照功能

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 );
    });
  } 

    
}

home.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>

有什么想法吗？非常感谢你！

Answer 1

无需将幻灯片导入app.module.ts中，直接将其导入组件中：

@ViewChild(Slides) slides: Slide

并且不要忘记将幻灯片作为ViewChild添加到组件中：

 Console.Write("Please enter the persons age: ");
 int age = int.Parse(Console.ReadLine());
 if(age == 17)
 {
     Console.WriteLine("That's to bad! You will have to wait until next year!");
 }    
 else if (age < 18)
 {
     Console.WriteLine("That's to bad! You will have to wait a couple years until you can come in!");
 }
 else
 {
     Console.WriteLine("You are of age to be here.");
 }

 while (true)
 {
     Console.Write("Please enter the next persons age: ");
     age = int.Parse(Console.ReadLine());

     if (age == 17)
     {
         Console.WriteLine("That's to bad! You will have to wait until next year!");
     }
     else if (age < 18)
     {
         Console.WriteLine("That's to bad! You will have to wait a couple years until you can come in!");
     }
     else if (age > 18)
     {
          Console.WriteLine("You are of age to be here.");
     }
     else
     {
          Console.WriteLine("Please enter a valid entry");
     }
 }

有关official docs的更多信息。

模块'AppModule'导入了意外的指令'Slides'。请添加一个@NgModule批注

1 个答案: