* ngДля скрытия по клику - PullRequest
Новая
       14

* ngДля скрытия по клику

0 голосов
/ 30 апреля 2018

У меня проблема с попыткой скрыть некоторые элементы 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>

Как я могу сделать так, чтобы, когда я нажимал на одну кнопку, чтобы выбранный элемент оставался видимым на странице, а другие исчезали?

Спасибо всем!

Ответы [ 3 ]

0 голосов
/ 30 апреля 2018

Я думаю, что вы должны сделать что-то вроде этого, удалить параметр i из функции showLogin: 

<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-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-файле вы должны иметь эти селекторы, чтобы скрыть и показать соответственно. Надеюсь это работает.

Для получения дополнительной информации о методах добавления и удаления перейдите по этой ссылке

0 голосов
/ 30 апреля 2018

Ниже приведено кодовое решение, по сути, вам нужно либо использовать службу, либо обернуть дочерние элементы, через которые вы выполняете итерацию, в другой компонент. Затем вам нужно будет использовать ngClass или ngStyle, чтобы скрыть элементы со скрытым свойством, установленным на ложную панель, по которой вы щелкнули.

Проверьте это: 

 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)
    }
}
0 голосов
/ 30 апреля 2018

Есть много способов сделать это. Это один из многих. Вы можете реализовать фильтрацию массива 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 у вас будет только один элемент, элемент, на который вы щелкнули, и будет отображен только один элемент. Как я уже говорил, это один из многих возможных способов решения этой проблемы. Надеюсь, это поможет!

...