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>

在你的Controller中设置元素的类，所有.card到卡片隐藏，以及点击元素的父元素到卡片显示：

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的项目，并将您单击的项目设置为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)
    }
}

Answer 4

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

java.io.FileNotFoundException:
    https://api.telegram.org/bot<bot_token>/sendMessage?chat_id=<chat_id>&parse_mode=html&text=<a href=http://google.com>Location</a>

在您的ts文件中添加：

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

* ng在点击时隐藏

4 个答案: