각도 2 요소 표시 및 숨기기

Angular 2의 부울 변수에 따라 요소를 숨기고 표시하는 데 문제가 있습니다.

이것은 div가 표시하고 숨기는 코드입니다.

<div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

변수는 "편집"되었으며 내 구성 요소에 저장됩니다.

export class AppComponent implements OnInit{

  (...)
  public edited = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }, 3000);
  }
}

saveTodos 함수가 시작되면 요소가 숨겨 지지만 요소가 표시되지만 3 초 후에 변수가 다시 false로 바뀌더라도 요소가 숨겨지지 않습니다. 왜?

* ngIf 지시어를 사용해야합니다

<div *ngIf="edited" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>


export class AppComponent implements OnInit{

  (...)
  public edited = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);
  }
}

업데이트 : Timeout 콜백 내에있을 때 외부 범위에 대한 참조가 누락되었습니다.

위의 추가와 같이 .bind (this)를 추가하십시오.

Q : 편집은 전역 변수입니다. * ngFor-loop 내에서 당신의 접근 방식은 무엇입니까? – 블라 우히 른

A : 반복하는 객체에 속성으로 편집을 추가하고 싶습니다.

<div *ngFor="let obj of listOfObjects" *ngIf="obj.edited" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>


export class AppComponent implements OnInit{
   
  public listOfObjects = [
    {
       name : 'obj - 1',
       edit : false
    },
    {
       name : 'obj - 2',
       edit : false
    },
    {
       name : 'obj - 2',
       edit : false
    } 
  ];
  saveTodos(): void {
   //show box msg
   this.edited = true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);
  }
}

달성하고자하는 것에 따라 두 가지 옵션이 있습니다.

1. hidden 지시문을 사용하여 요소를 표시하거나 숨길 수 있습니다

   <div [hidden]="!edited" class="alert alert-success box-msg" role="alert">
     <strong>List Saved!</strong> Your changes has been saved.
   </div>

2. ngIf 제어 지시문을 사용하여 요소를 추가하거나 제거 할 수 있습니다. 이것은 요소를 보여 주거나 숨기지 않지만 DOM에서 추가 / 제거하기 때문에 숨겨진 지시문과 다릅니다. 저장하지 않은 요소의 데이터를 잃을 수 있습니다. 취소 된 편집 컴포넌트에 대해 더 나은 선택이 될 수 있습니다.

   <div *ngIf="edited" class="alert alert-success box-msg" role="alert"> 
     <strong>List Saved!</strong> Your changes has been saved.
   </div>

3 초 후에 변경 문제가 발생하면 setTimeout과의 비 호환성 때문일 수 있습니다. 페이지에 angular2-polyfills.js 라이브러리를 포함 시켰습니까?

Html Dom-Element를 제거하지 않아도되는 경우 * ngIf를 사용하십시오.

그렇지 않으면 이것을 사용하십시오.

<div [style.visibility]="(numberOfUnreadAlerts == 0) ? 'hidden' : 'visible' ">
   COUNTER: {{numberOfUnreadAlerts}} 
</div>

자식 구성 요소를 사용하려면 *ngif="selectedState == 1"

그 대신 내가 사용한 [hidden]="selectedState!=1"

그것은 나를 위해 일했습니다. 자식 구성 요소를 올바르게로드하고 이것을 사용한 후에 자식 구성 요소 숨기기 및 숨기기 해제가 정의되지 않았습니다.

지시문에 대한 좋은 사용 사례입니다. 이와 같은 것이 놀랍게도 유용합니다.

@Directive({selector: '[removeAfter]'}) export class RemoveAfter {
  constructor(readonly element: ElementRef<HTMLElement>) { }

  /**
   * Removes the attributed element after the specified number of milliseconds. 
   * Defaults to (1000)
   */
  @Input() removeAfter = 1000;


  ngOnInit() {
    setTimeout(() => {
      this.element.nativeElement.remove();
    }, this.removeAfter);
  }
}

아래 코드 스 니펫을 사용하여 수행 할 수 있습니다.

각도 코드 :

 export class AppComponent {  
    toggleShowHide: string = "visible";  
 }

HTML 템플릿 :

  Enter text to hide or show item in bellow: 
  <input type="text" [(ngModel)]="toggleShowHide">
  <br>
  Toggle Show/hide:
  <div [style.visibility]="toggleShowHide">   
     Final Release Angular 2!
  </div>

사용자의 요구에 따라, *ngIf또는 [ngClass]="{hide_element: item.hidden}"어디 CSS 클래스 hide_element입니다{ display: none; }

*ngIf상태 변수를 변경하는 *ngIf중이면 CSS display: none;를 사용해야 하는 경우 문제가 발생할 수 있습니다 .

위의 @inoabrian 솔루션이 저에게 효과적이었습니다. 페이지를 새로 고칠 때 숨겨진 요소가 페이지에 다시 표시되는 상황이 발생했습니다. 여기 내가 해결하기 위해 한 일이 있습니다.

export class FooterComponent implements OnInit {
public showJoinTodayBtn: boolean = null;

ngOnInit() {
      if (condition is true) {
        this.showJoinTodayBtn = true;
      } else {
        this.showJoinTodayBtn = false;
      }
}

setTimeout 함수에 bind (this) 를 추가 하면 작동합니다.

setTimeout(function() {
       this.edited = false;
       console.log(this.edited);
   }.bind(this), 3000);

HTML 변경

<div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

에

<div *ngIf="edited" class="alert alert-success alert-dismissible fade in" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>