如果我们在 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

在 for 循环中使用 index。如果我理解你的问题，你需要这样的东西

在组件中：

<div class="basic-container">  
 <div *ngFor="let item of names;let i=index;">
   <p>{{item}}</p>
   <button (click)='enable(i+1)'>Display</button><br>
  <mat-spinner *ngIf="newIndex==(i+1)" strokeWidth="3" [diameter]="20"></mat-spinner> 
   </div>  
</div>

在打字稿中需要初始化变量：

newIndex: any;
enable(index) :void {
   if(this.newIndex !== index){
      this.newIndex = index;
   }else{
      this.newIndex = this.names.length + 1;
   }
}

这是工作示例：angular-material2-progress-spinner-for-each-button-click

Answer 2

最好的方法是，修改您的项目数组。它应该有标志、str 或任何其他你想要的键。在按钮单击时传递项目并根据需要修改对象。

HTML

<div *ngFor="let item of names">
    <p>{{item.name}} {{item.flag}} {{item.str}}</p>
    <button (click)='enable(item)'>Display</button><br>
    <mat-spinner *ngIf="item.flag" strokeWidth="3" [diameter]="20"></mat-spinner> 
</div>

TS

names = [
    {
        name: "hello",
        flag: false,
        str: "Arpit"
    },
    ...
];

enable(item) :void {
    item.flag= true;
    ...
}

这样你就可以完全控制数组的每一项。如果将来您想自定义或操作任何项目，您可以这样做。例如。你想在按钮点击时切换。

Answer 3

可以通过在*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>

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

How to trigger a function on one instance if we are using *ngFor in angular 4

object

click

ngfor

angular