Javascript 带图像的开放模式

我对爱奥尼亚很陌生

我正在制作一个基本的ionic应用程序，其中包含用户名和图像（即数组）的用户列表

Ts:

  users = [
    {
      "name": "First User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
    {
      "name": "Second User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
    {
      "name": "Third User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
  ]

<div *ngFor="let user of users">
    <span> {{ user.name }} </span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button ion-button type="button" (click)="openDocument(user.image)"> View Image </button>
    <br>
</div>

Html:

  users = [
    {
      "name": "First User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
    {
      "name": "Second User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
    {
      "name": "Third User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
  ]

<div *ngFor="let user of users">
    <span> {{ user.name }} </span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button ion-button type="button" (click)="openDocument(user.image)"> View Image </button>
    <br>
</div>

如何显示阵列图像（意味着用户有很多图像要显示）？单击查看图像模式需要打开，并且需要逐个显示该用户的图像查看模式中单击下一步按钮的每个图像

---

参考文献中的类似内容：但我需要带离子3的角度6。希望对您有所帮助

页面/home/home.ts

：

 import { Component } from '@angular/core';
 import { NavController, ModalController } from 'ionic-angular';
 import {ModelPage} from '../model/model';

 @Component({
     selector: 'page-home',
     templateUrl: 'home.html'
 })
  export class HomePage {
      constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
      }

       openDocument(imageSource) {
           this.modalCtrl.create(ModelPage,{"img":imageSource}).present();
       }
  }

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import  {ModelPage} from '../pages/model/model';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ModelPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ModelPage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

页面/model/model.ts

（新文件）：

页面/model/model.html

（新文件）：

工作环节

---

希望这对你有帮助

页面/home/home.ts

：

 import { Component } from '@angular/core';
 import { NavController, ModalController } from 'ionic-angular';
 import {ModelPage} from '../model/model';

 @Component({
     selector: 'page-home',
     templateUrl: 'home.html'
 })
  export class HomePage {
      constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
      }

       openDocument(imageSource) {
           this.modalCtrl.create(ModelPage,{"img":imageSource}).present();
       }
  }

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import  {ModelPage} from '../pages/model/model';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ModelPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ModelPage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

页面/model/model.ts

（新文件）：

页面/model/model.html

（新文件）：

工作环节

基于“我设法做了图像幻灯片放映”。 请投票支持他的回答

pages/model/model.ts

import { Component } from '@angular/core';
import { NavController,NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';

@Component({
  selector: 'page-model',
  templateUrl: './model.html'
})
export class ModelPage {

  private imgs:any;
  private name:string;
  private current: number = 0;

  constructor(public navCtrl: NavController,public viewCtrl:ViewController,public navParams: NavParams) {

  }

  closeModal(){
    this.viewCtrl.dismiss();
  }

  ionViewDidLoad() {
    this.imgs=(this.navParams.get("img"));
    this.name=(this.navParams.get("name"));
  }

  next() {
    this.current = (this.current + 1) % this.imgs.length;
  }
  prev() {
    this.current = (this.current + this.imgs.length - 1) % this.imgs.length;
  }

}

pages/model/model.html

<ion-header>
  <ion-navbar>
    <ion-title>{{ name || 'Header'}}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding> 
  <ion-buttons center>
    <button ion-button (click)="prev()"><ion-icon name="arrow-back"></ion-icon></button>
      {{ current + 1 }}
    <button ion-button (click)="next()"><ion-icon name="arrow-forward"></ion-icon></button>
  </ion-buttons>
  <ng-container *ngFor="let img of imgs; let i = index">
    <ion-thumbnail *ngIf="i == current">
      {{ img }}<br>
      <img [src]="img" /><br>
    </ion-thumbnail>    
  </ng-container>

</ion-content>

{{name | |'Header'}}
接近
{{current+1}}
{{img}}

根据“我成功地进行了图像幻灯片放映”，请在中查看它的实际操作。 请投票支持他的回答

pages/model/model.ts

import { Component } from '@angular/core';
import { NavController,NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';

@Component({
  selector: 'page-model',
  templateUrl: './model.html'
})
export class ModelPage {

  private imgs:any;
  private name:string;
  private current: number = 0;

  constructor(public navCtrl: NavController,public viewCtrl:ViewController,public navParams: NavParams) {

  }

  closeModal(){
    this.viewCtrl.dismiss();
  }

  ionViewDidLoad() {
    this.imgs=(this.navParams.get("img"));
    this.name=(this.navParams.get("name"));
  }

  next() {
    this.current = (this.current + 1) % this.imgs.length;
  }
  prev() {
    this.current = (this.current + this.imgs.length - 1) % this.imgs.length;
  }

}

pages/model/model.html

<ion-header>
  <ion-navbar>
    <ion-title>{{ name || 'Header'}}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding> 
  <ion-buttons center>
    <button ion-button (click)="prev()"><ion-icon name="arrow-back"></ion-icon></button>
      {{ current + 1 }}
    <button ion-button (click)="next()"><ion-icon name="arrow-forward"></ion-icon></button>
  </ion-buttons>
  <ng-container *ngFor="let img of imgs; let i = index">
    <ion-thumbnail *ngIf="i == current">
      {{ img }}<br>
      <img [src]="img" /><br>
    </ion-thumbnail>    
  </ng-container>

</ion-content>

{{name | |'Header'}}
接近
{{current+1}}
{{img}}

---

查看GitHub上的Ionic团队的示例：链接到此页面：查看GitHub上的Ionic团队的示例：链接到此页面：有效，如您所见：感谢您的解决方案和帮助..我发现已经完成了一半。。是否不可能在模式中设置下一个和上一个选项以逐个（而不是一次显示全部）显示图像？？。。正如问题中提到的那样。@HelloWorld基于Kurtis的工作，我成功地做到了这一点：。对不起，模板太乱了。我对爱奥尼亚不太了解，但一点AngularIt是有效的，正如你在这里看到的：谢谢你的解决方案和帮助..我发现它已经完成了一半。。是否不可能在模式中设置下一个和上一个选项以逐个（而不是一次显示全部）显示图像？？。。正如问题中提到的那样。@HelloWorld基于Kurtis的工作，我成功地做到了这一点：。对不起，模板太乱了。我对爱奥尼亚不太了解，但有一点棱角分明