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

Question

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

指南.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);
	}
}

Answer 1

这是您的代码的简化版本，可以正常工作。用两个词 = 简单类型(数字是我们的情况)复制到点击处理程序参数，而不是通过 ref 发送。所以每次你从我那里得到相同的值(value)。

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

}