Question

如何在点击轮播组件内部的按钮时在控制台窗口中显示数组索引值？控制台窗口两次显示索引值，最后重定向到第一个数组索引值为1。控制台窗口应该只显示增量为1的索引值，因此它开始显示来自。

的数组索引值

guide.html

＆＃13;

<tr *ngFor="let guide of guides">
  <td>{{guide.Type}}</td>
  <td>{{guide.PageColor}}</td>
  <td>
  	<carousel class="carousel slide" data-interval="false">
	    <slide  *ngFor="let image of images; let i=index ">
	      <p>Image: {{i+1}}</p>
	      <img src="{{image.image}}" alt="First slide"/>
	      <p (click)="idValue(i)">
	       	<input type="file" name="file" id="file" />
	       	<label for="file">{{image.change}}</label>
	      </p>
	     </slide>
  	</carousel>
	</td>
</tr>

＆＃13;

guide.component.ts

＆＃13;

import { Component } from '@angular/core';
import { CarouselModule } from 'ngx-bootstrap';
@Component({
  templateUrl: './guide.html'
})
export class GuideComponent {
	guides : any = [{ Type: 'Company', PageColor: 'red'},{ Type: 'Company', PageColor: 'Blue'}];

	images:any = [{image :'img1.jpg', change:'change'},{image: 'img2.jpg', change:'add'},{image:'img3.jpg', change:'edit'},{image:'im4.jpg',change:'delete' }];
        
	idValue(i) {
		i=i+1;
		console.log(i);
	}
}

＆＃13;

Answer 1

以下是您的代码的简化版本。用两个词=简单类型（数字是我们的情况）复制到click-handler参数，而不是由ref发送。所以每当你从i获得相同的价值时。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div  *ngFor="let image of images; let i=index ">
          <p>Image: {{i+1}}</p>

          <p (click)="idValue(i)">
          Button
          </p>
         </div>
  `,
})
export class AppComponent  { 

  images:any = [{image :'img1.jpg', change:'change'},{image: 'img2.jpg', change:'add'},{image:'img3.jpg', change:'edit'},{image:'im4.jpg',change:'delete' }];
  indexArr = new Array(this.images.length + 1);

    idValue(i) {
      if(!this.indexArr[i]) { this.indexArr[i] = 0};
        this.indexArr[i] += 1;
        console.log('index:', i, ' Click number', this.indexArr[i]);
    }

}

如何在角度2的控制台上显示数组索引值

guide.html

guide.component.ts

1 个答案: