*ngFor 点击隐藏

Question

我在尝试隐藏一些 div 时遇到问题。

代码：

example.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>

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

谢谢大家！

Answer 1

有很多方法可以做到这一点。这是众多之一。您可以在单击按钮时实现对 empresas 数组的过滤。 执行以下操作：在 showLogin($event, i) 函数中，您可以删除元素 没有被点击的empresas数组

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

在您的 .ts 文件中：

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

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

Answer 2

我认为你应该这样做，从 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>

在你的控制器中，将类设置为元素，将所有 .card 设置为 card-hide，将点击元素的父级设置为 card-show：

showLogin = function (event) {

    var target = event.target;
    var pElement = target.parentElement.parentElement;
    var pclassAttr = pElement.attributes.class;
    var cardElems = angular.element( document.querySelector('.card'));
    cardElems.addClass('card-hide');
    pElement.classList.remove('card-hide');
    pElement.classList.add('card-show');
}

因此，在您的 CSS 文件中，您应该分别隐藏和显示这些选择器。我希望它有效。

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

Answer 3

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

看看这个：

 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)
    }
}

Answer 4

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

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

在你的 ts 文件中添加：

show = [];

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