Скрыть / показать с помощью * ngIf Angular2

У меня есть два элемента, которые я хочу скрыть и показать в зависимости от значения условия *ngIf.

По умолчанию мой wrap блок виден, и когда я нажимаю на один из его divs, этот wrapблок должен исчезнуть, и только выбранный div's контент должен отображаться внутри моего span элемента. Затем, когда я нажимаю на свой элемент span, он должен исчезнуть, и снова должен появиться блок wrap со всем содержимым по умолчанию.

Чтобы реализовать это, я использую *ngIf со значением visability для обоих элементов, ожидая, что мои функции работают следующим образом:

wrap - visible;
span - hidden;

wrap - hidden;
span - visible;

Вот мой код:

@Component({
selector: 'my-app',
template: `
<div id="wrap" class="wrap" *ngIf="visability">
<div (click)="clicked($event)">
  <h2>Hello {{name}}</h2>
</div>
<div (click)="clicked($event)">
  <h2>Hello {{year}}</h2>
</div>
<div (click)="clicked($event)">
  <h2>Hello {{surname}}</h2>
</div>
<div (click)="clicked($event)">
  <h2>Hello {{country}}</h2>
</div>
<div (click)="clicked($event)">
  <h2>Hello {{cartoon}}</h2>
</div>


 <div class="view">
  <span id="span" (click)="showDivs()" *ngIf="visability">{{target}}    </span>
 </div>

 `,
})
export class App {
name:string;
year: string;
surname: string;
country: string;
cartoon: string;
element: any;
target: any;

constructor() {
var wrap = document.getElementById("wrap");
var span = document.getElementById("span");
this.name = 'Angular2'
 this.year = '1989'
  this.surname = 'Connor'
   this.country = 'USA'
    this.cartoon = 'Tom & Jerry'
  }

clicked(event) {
wrap.visability = false;
span.visability = true;
this.target = event.target.innerText;
} 

showDivs(){
span.visability = false;
wrap.visability = true;
}

}

My Plunker

Почему мои функции не работают должным образом?


angular event-binding angular-ng-if
person Alexandr Belov    schedule 20.01.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я действительно немного изменил ваш код. Положите visability как true для первого div и false для второго. Чтобы лучше их разделить. Затем нужно просто переключать логические значения на основе щелчка, например:

Сначала объявите видимость как переменную, чтобы вы могли ссылаться на нее с помощью this, а затем просто переключите видимость.

  clicked(event) {
    this.visability = false;
    this.target = event.target.innerText;
  }

и

  showDivs(){
    this.visability = true;
    // span.visability = false; // remove this
    // wrap.visability = true;  // remove this
  }

и html соответственно:

<div id="wrap" class="wrap" *ngIf="visability">

и

<span id="span" (click)="showDivs()" *ngIf="!visability">{{target}}</span>

Это одно из решений.

Ваш плункер

person AJT82    schedule 20.01.2017

arrow_upward
0
arrow_downward

Я решил это, удалив *ngIf для моего второго элемента. Я просто использовал * ngIf = "shown" для span.

Затем в конструкторе я установил оба

visibility = true

и

shown = true

Внутри функций я переключил значения на противоположные, таким образом, мне удалось добиться того, что я хотел, хотя я не знаю, лучший ли это путь.

@Component({
  selector: 'my-app',
  template: `
  <div id="wrap" class="wrap" *ngIf="visibility">
    <div (click)="clicked($event)">
      <h2>Hello {{name}}</h2>
    </div>
    <div (click)="clicked($event)">
      <h2>Hello {{year}}</h2>
    </div>
    <div (click)="clicked($event)">
      <h2>Hello {{surname}}</h2>
    </div>
    <div (click)="clicked($event)">
      <h2>Hello {{country}}</h2>
    </div>
    <div (click)="clicked($event)">
      <h2>Hello {{cartoon}}</h2>
    </div>
  </div>

  <div class="view">
    <span id="span" (click)="showDivs()" *ngIf="shown">{{target}}</span>
  </div>

  `,
})
export class App {
  name:string;
  year: string;
  surname: string;
  country: string;
  cartoon: string;
  element: any;
  target: any;

  clicked(event) {
     this.target = event.target.innerText;
     this.visibility = false;
     this.shown = true;
  }

  showDivs(){
     this.shown = false;
     this.visibility = true;
  }

  constructor() {
    this.visibility = true;
    this.shown = true;
    this.name = 'Angular2'
     this.year = '1989'
      this.surname = 'Connor'
       this.country = 'USA'
        this.cartoon = 'Tom & Jerry'
  }



}

Рабочий Plunker

person Alexandr Belov    schedule 20.01.2017