ng2上的angular2切换图标对于

Question

我的angular2问题是，当我到达页面但仅在单击后图标不可见。我的数组是 “钥匙”

<ion-grid class="dueD-line" *ngFor="let line of keys; let i=index"> 
<div style="margin-bottom: 6%;" (click)="toggleDetails(line)"> 
<ion-col class="first-title-row first-title-row-size" text-left align-items: left col-9>Line {{i+1}}</ion-col> 
<ion-col class="first-title-row first-title-row-size" text-right align-items: right col-3><ion-icon class="arrow-right" item-right name="ios-arrow-down-outline"></ion-icon><ion-icon class="arrow-right" item-right name={{line.icon}}></ion-icon></ion-col> 
</div> 
<div *ngIf="line.showDetails"> 
{{line.text}} 
</ion-grid> 

export class ReviewCartPage implements OnInit { 

    keys: any; 
    icon: string; 

constructor(){ 
this.icon = 'ios-arrow-down-outline'; 
} 

toggleDetails(line) { 
    if (line.showDetails) { 
     line.showDetails = false; 
     line.icon = 'ios-arrow-down-outline'; 
    } else { 
     line.showDetails = true; 
     line.icon = 'ios-arrow-up-outline'; 
    } 
    } 

Answer 1

在你的组件类：

showDetails = 1; 
keys = [{ id: 1, icon: 'ios-arrow-down-outline', text: "Your text for icon1" }, { id: 2, icon: 'ios-arrow-up-outline', text: "Your text for icon2" }] 

toggleDetails(id) { 
    this.showDetails = id; 
} 

和HTML：

<div style="color:red; display:flex;" *ngFor="let line of keys"> 
    <span *ngIf="showDetails==line.id">{{line.icon}}</span> 
    <span *ngIf="showDetails==line.id">{{line.text}}</span> 
    <button (click)="toggleDetails(line.id)">click</button> 
</div> 

这样，如果单击该按钮的 “线”，才会显示。第一个是默认的。您必须首先填充“键”数组。 您提交的错误是this.icon ='ios-arrow-down-outline';