javascript - 如何在 Angular 2的控制台上显示数组索引值

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

guide.html

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

guide.component.ts

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

最佳答案

这是您的代码的简化版本，可以正常工作。
用两个词=简单类型（数字是我们的情况）复制到点击处理程序参数中，而不是由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]);
    }

}

关于javascript - 如何在 Angular 2的控制台上显示数组索引值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47651214/