Angular *单击时隐藏

我有一个问题，试图隐藏一些div

代码：

示例.component.html

<div class="allCompanies"  [@listAnimation]="companies.lenght">
  <div id="{{i}}" class="company" *ngFor="let comp of companies; let i = index">
    <div *ngIf="show" class="card" id="card">
      <div class="row">
        <div class="col-sm-8">
          <p>
            <strong>Name: </strong>{{comp.name}}</p>
          <p>
            <strong>Data: </strong>{{comp.data}}</p>
        </div>
        <div class="btnDiv col-sm-4">
          <button class="btn login" (click)="showLogin($event, i)">Login</button>
        </div>
      </div>
    </div>
  </div>
</div>

名称：{{comp.Name}


数据：{{comp.Data}

登录

当我点击一个按钮时，如何使点击的元素在页面上保持可见，并使其他元素消失

---

谢谢大家!

有很多方法可以做到这一点。这是其中之一。单击按钮时，可以对empresas阵列进行过滤。 这样做：在showLogin（$event，i）函数中，您可以删除元素 未单击的empresas数组的

<button class="btn login" (click)="showLogin($event, i)">Entrar</button>

entra

在.ts文件中：

showLogin($event, index) {
    for (let k = 0; k < this.empressas.length; k++) {
        if (k != index) {
            this.empressas.slice(k,1);
        }
    }
}

showLogin（$event，index）{
for（设k=0；k

---

这样，现在在您的epressas数组中，您将只有一个元素，即您单击的元素，并且它将只呈现一个元素。正如我提到的，这可能是解决这个问题的许多方法之一。希望有帮助

我认为您应该这样做，从showLogin函数中删除I参数：

<div class="allCompanies"  [@listAnimation]="empresas.lenght">
  <div id="{{i}}" class="empresa" *ngFor="let comp of empresas; let i = index">
    <div *ngIf="show" class="card" id="card">
      <div class="row">
        <div class="col-sm-8">
          <p>
            <strong>Name: </strong>{{comp.name}}</p>
          <p>
            <strong>Data: </strong>{{comp.data}}</p>
        </div>
        <div class="btnDiv col-sm-4">
          <button class="btn login" (click)="showLogin($event)">Entrar</button>
        </div>
      </div>
    </div>
  </div>
</div>

因此，在CSS文件中，应该分别隐藏和显示这些选择器。我希望它能起作用

---

有关添加和删除方法的更多信息，请查看此

我已经编写了下面的解决方案，基本上，您需要使用服务或将迭代的子项包装到另一个组件中。然后，您需要使用ngClass或ngStyle来隐藏隐藏属性设置为false的项，即您单击的项

看看这个：

 export class ListHandlerService {
    public myList: any[];

    constructor() {
        this.myList = [
            {
                name: 'bob',
                hidden: false
            },
            {
                name: 'john',
                hidden: false
            }
        ]//whatever your list is
    }

    hideOthers(name: any) {
        let newList = this.myList.map((object) => {
            if (object.name !== name) {
                return object.hidden = true
            }
        })
        this.myList = newList;
    }
}


export class ItemComponent {
    public name: string;
    public hidden: boolean = false;
    constructor(private myListHandler: ListHandlerService) { }

    onClick() {
        this.myListHandler.hideOthers(this.name)
    }
}

---

这里有一个更简单的解决方案

 <div *ngIf="show[i]" class="card" id="card"> //Change show to show[i]

---

完全同意，但如果我使用切片，我会遇到一个问题，如果我后悔选择了该选项，并且我后退一步，我的阵列会丢失所有其他元素不？是的，没错。必须有一种方法将起始数组保存在某个helper变量中，以便在筛选empressas数组时不会丢失初始数据。。。然后，当您后悔选择了该选项时，当您返回时，您会像这样重新实例化empressas变量。empressas=this.HelperVariableEmpressash如何返回？是否有一个按钮，你可以点击，使你在以前的状态（开始状态）？如果是这种情况，您只需要将click事件侦听器放在按钮上，并在按钮上添加方法。在这种方法中，您可以刷新empressas变量并从头开始：this.empressas=this.helpervariableemppressasi我实际上并没有这样做，但也许我会进一步开发它哈哈哈。非常感谢。没问题！：）您可以这样做：（1）在代码中定义

selectedComp

（使用适当的类型），（2）当您单击一个项目时，执行

（单击）=“selectedComp=comp”

，（3）使用

*ngIf=“！selectedComp| selectedComp==comp”

进行过滤，这种行为使得dissapear元素是一个点击并显示其他元素的元素，我想要的正是opossite，mantain the clickd，hide de others。知道吗？我不知道你怎么能得到这个结果。

*ngIf

中的表达式应仅对所选组件计算为

true

，或者如果

selectedComp

未定义。抱歉，但我使用的是angular 4:S。感谢您花时间回答。哦，抱歉。这样你就可以使用这个类了。它是操作DOM元素的助手。一旦导入并在构造函数（private renderer:Renderer2）{}中赋值，就可以像这样使用它：this.renderer.setStyle（this.el.nativeElement，'color'，'blue'）；OP要求单击的元素“在页面上保持可见，并使其他元素消失？”。您的解决方案切换每个单独的元素。@Dimitrisk。你是对的。我没有回答这个问题。

 <div *ngIf="show[i]" class="card" id="card"> //Change show to show[i]

show = [];

showLogin(event: any, index: any){
   this.show[index] = !this.show[index];
}