Question

我开始学习角4。我有多个div部分，每个div部分都有按钮和内容，一旦点击按钮点击则会显示相应的div，一旦点击另一个按钮隐藏其他部分。

<div *ngFor="let number of [0,1,2,3,4] ; let i = index">
  <div>
    <button (click)="showContent(this);"> Click Me {{index}} </button
    <div class="content"> Hello world {{index}}</div>
  </div>      
</div>

Js代码

export class AppComponent {

  showContent(evt){

    event.target.style.display = 'block';   
  }   

}

抱歉，我只添加了最少的代码。

Answer 1

您可以<div *ngIf="variable">使用variable作为布尔值。您的功能showContent()可以将variable更改为true，您的组件就会显示出来。

Answer 2

有多种方法可以解决这个问题：

1-创建另一个数组，保留每个项目的状态，我不喜欢：

public state = ['none','none','none','none','none'];  


  <div *ngFor="let number of [0,1,2,3,4] ; let i = index">
    <div>
      <button (click)="state[i]='block'"> Click Me {{index}} </button
      <div [style.display]='state[i]' class="content"> Hello world {{index}}</div>
    </div>      
  </div>

2-创建一个封装逻辑的指令，它是可重用的：

@Directive({

   selector:`[showHide]`,
   exportAs :'showHide'

})

export class ShowHideDirective{

  @Input('showHide') isHidden = true; // initial state


  public show(){

       this.isHidden = false;
  }



  @HostBinding('[atrr.hidden]') get isItHidden() { // if this is not working for you, you can change it to `[style.display]` and return the `block` or `none`
     return this.isHidden;
  };


}


<div *ngFor="let number of [0,1,2,3,4] ; let i = index">
  <div>
    <button (click)="showHideElement.show()"> Click Me {{index}} </button
    <div #showHideElement='showHide' class="content"> Hello world {{index}}</div>
  </div>      
</div>

不要忘记在您的应用模块中声明ShowOnClickDirective。

Answer 3

这可能会有所帮助：

<div *ngFor="let number of [0,1,2,3,4] ; let i = index">
  <div>
    <button (click)="showContent(this, index);"> Click Me {{index}} </button
    <div class="content" *ngIf="selectedIndex == index"> Hello world {{index}}</div>
  </div>      
</div>

JS：

export class AppComponent {
  selectedIndex = -1;
  showContent(evt, index) {
    this.selectedIndex = index;   
  }
}

Answer 4

这可能会有所帮助：

<ng-container *ngFor="let item of [1,2,3,4];let i=index">
    <div style="height:40px;border:1px solid #000;margin-bottom:10px">
        <button (click)="selectedDivIndex=i">Button {{i+1}}</button>
        <div class="content" *ngIf="selectedDivIndex===i">
            Content for #{{i+1}}
        </div>
    </div>
</ng-container>

注意：如果您想先加载内容，请将selectedDivIndex设置为组件文件（.ts）中的某个默认索引</ p>

Angular4 - 显示/隐藏循环内的内容

4 个答案: