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
函数在每个地方都会被调用。
最佳答案
可以通过在*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 - 如果我们在 Angular 4 中使用 *ngFor,如何在一个实例上触发一个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51960235/