angular - 如果我们在 Angular 4 中使用 *ngFor，如何在一个实例上触发一个函数

Question

HTML

<mat-toolbar color="primary">
    Angular Material 2 App
</mat-toolbar>
<div class="basic-container">  
     <div *ngFor="let item of names">
       <p>{{item}} {{flag}} {{str}}</p>
       <button (click)='enable()'>Display</button><br>
      <mat-spinner *ngIf="flag" strokeWidth="3" [diameter]="20"></mat-spinner> 
       </div>  
    <span class="version-info">Current build: {{version.full}}</span>
</div>

TS

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

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent { 
  version = VERSION;
  names = ["hello" , "hIII" , "BYE"];
  flag:boolean=false;
  str='Ar';

  enable() :void {
    this.flag= true;
    this.str = "Arpit";
  }
}

在上面点击显示按钮的代码中，我只想在那个特定的 div 上显示微调器，但因为我使用的是 *ngFor 函数在每个地方都会被调用。

stackbliz url

Answer 1

可以通过在*ngFor中添加索引来解决 working link

在 Component.ts 中

export class AppComponent { 
version = VERSION;
names = ["hello" , "hIII" , "BYE"];
flag:boolean=false;
index : number =0;

 toggle(i) :void {
    if(this.index == i && this.flag){
    this.index =null;
   }else{
     this.flag  = true;
     this.index = i;
   }
 }

在 Html 中

 <mat-toolbar color="primary">
  Angular Material 2 App
   </mat-toolbar>
 <div class="basic-container">  
   <div *ngFor="let item of names;let i= index">
   <p>{{item}}</p>  
   <button (click)="toggle(i)">Display</button><br>
  <mat-spinner *ngIf="i == index && flag" strokeWidth="3" [diameter]="20"> 
    </mat-spinner> 
   </div>  
<span class="version-info">Current build: {{version.full}}</span>