我想一次只顯示第一格，並隱藏所有其他格

我想一次只顯示第一格，並隱藏所有其他格。並在按鈕上單擊需要顯示第二個div並隱藏所有其他div。我想一次只顯示第一格，並隱藏所有其他格

組件模板：

@Component({ 
    selector: 'question', 
    template: `<div class="slide-{{question.id}}" [ngClass]="{hide: isOn}" *ngFor="let question of questions"> 
      <div class="section-head text-center">{{question.heading}}</div> 
      <div class="section-desc text-center">{question.description}}</div> 
      </div> 

<div class="action"> 
    <div class="col-md-12 text-center"> 
     <button type="button" class="btn prime prev-step ripple hide"><i class="material-icons pull-left">arrow_back</i> Prev </button> 
     <button (click)="toggle(!isOn)" type="button" class="btn prime next-step ripple">Next <i class="material-icons pull-right">arrow_forward</i></button> 
    </div> 
</div>` 
})

類：

export class Question{ 
    id: number; 
    heading: string; 
    description: string; 
    field: string; 
    isOn = false; 
    toggle(newState) { 
     this.isOn = newState; 
    } 
}

來源

2016-06-13 Bhawna

不知道這是否是你想要的。

我爲索引添加了一個i變量，然後在當前索引不等於變量showIdx時將hidden設置爲true。在按鈕點擊我遞增showIdx變量：

@Component({ 
    selector: 'question', 
    template: `<div class="slide-{{question.id}}" [ngClass]="{hide: isOn}" *ngFor="let question of questions let i=index" [hidden]="i !== showIdx"> 
      <div class="section-head text-center">{{question.heading}}</div> 
      <div class="section-desc text-center">{question.description}}</div> 
      </div> 

<div class="action"> 
    <div class="col-md-12 text-center"> 
     <button type="button" (click)="showIdx++" class="btn prime prev-step ripple hide"><i class="material-icons pull-left">arrow_back</i> Prev </button> 
     <button (click)="toggle(!isOn)" type="button" class="btn prime next-step ripple">Next <i class="material-icons pull-right">arrow_forward</i></button> 
    </div> 
</div>` 
})

export class Question{ 
    showIdx = 0; 

    id: number; 
    heading: string; 
    description: string; 
    field: string; 
    isOn = false; 
    toggle(newState) { 
     this.isOn = newState; 
    } 
}

來源

2016-06-13 09:27:39

岡特Zöchbauer：這裏就點擊編譯器不能解析。所以我增加了這樣的值（click）=「increment（showIdx）」和函數增量（showIdx）showIdx ++; } .............但點擊按鈕時，其他div不顯示 – Bhawna

該函數應該是'increment（）{this.showIdx ++; }'或者'（click）=「showIdx = showIdx + 1」或者'（click）=「showIdx + = 1」'。我不確定模板支持哪些運算符（對不起，我希望'++'）能夠工作。 –

您需要定義對象isOn，而不是一個布爾值。下面是一個示例：

isOn: {} 

toggle(question) { 
    Object.keys(isOn).forEach(key => { 
    if (key != question.id) { 
     isOn[question.id] = false; 
    } 
    }); 
    isOn[question.id] = !isOn[question.id]; 
}

，並在模板：

template: ` 
    <div class="slide-{{question.id}}" 
     [ngClass]="{hide: isOn[question.id]}" 
     *ngFor="let question of questions"> 
    <div class="section-head text-center">{{question.heading}}</div> 
    <div class="section-desc text-center">{question.description}}</div> 

    <div class="action"> 
     <div class="col-md-12 text-center"> 
     <button type="button" class="btn prime prev-step ripple hide"><i class="material-icons pull-left">arrow_back</i> Prev </button> 
     <button (click)="toggle(question)" type="button" class="btn prime next-step ripple">Next <i class="material-icons pull-right">arrow_forward</i></button> 
    </div> 
    </div> 
</div> 
`

來源

2016-06-13 09:27:41

我想一次只顯示第一格，並隱藏所有其他格

回答

相關問題