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>

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

ngFor上的angular2切换图标

1 个答案: