실시간으로 이온 토글 상태를 업데이트하는 방법은 무엇입니까?

Question

firebase 데이터베이스에 자신의 상태를 저장하는 응용 프로그램에서 이온 토글이 있습니다. firebase에서로드 한 데이터로 상태를 변경할 수있는 방법이 있습니까?

예를 들어 데이터베이스에서 상태가 true이면보기를로드 할 때 토글이 켜집니다. 나는 체크를 시도했다 :

<ion-toggle checked="status()" > 

여기서 status()는 부울을 반환한다.

그러나 firebase의 비동기 기능으로 인해 status()의 값보다 먼저 뷰가로드됩니다. 지금까지이 문제에 대한 해결책을 찾지 못했습니다. 도움이 필요합니다.

Answer 1

네,이 방법은 있지만 속성의 함수를 사용하는 것은 좋지 않습니다. DOM에서 값을 반환하는 함수를 사용하면 DOM에 변경 사항이있을 때마다 해당 함수가 실행됩니다. 따라서이 함수가 Firebase에서 항목을 가져 오는 함수이기 때문에 사용자가 모든 Firebase에 요청하도록 만듭니다 DOM이 업데이트되는 시간.

이것을 수행하는 좋은 방법은 Firebase 결과를 변수에 저장하는 것입니다. 당신이 드 페이지를 입력 할 때 다음과 같이 수행 할 수 있습니다

public myStatus: boolean; 

// USING A LIFECYCLE HOOK 
ionViewWillLoad(){ 
    firebase.database().ref(`Path/To/Your/Status`).once('value', snapshot => { 
    this.myStatus = snapshot.val(); 
    }); 
} 

그리고 당신의 HTML에

<ion-toggle [checked]="myStatus"> 
<!-- You need to bind your checked attribute to myStatus, using checked="{{myStatus}}" also works --> 

당신이 당신의 상태가 당신은 또한 만들 수 있습니다 변경 및 중포 기지에서 관측 가능한 경우 항상 확인해야하는 경우

, 그래서 상태가 바뀌면 토글을 변경할 수 있습니다 :

ionViewWillLoad(){ 
    firebase.database().ref(`Path/To/Your/Status`).once('value', snapshot => { 
    this.myStatus = snapshot.val(); 
    }); 
    firebase.database().ref(`Path/To/Your/Status`).on('child_changed', snapshot => { 
    this.myStatus = snapshot.val(); 
    }); 

    // YOU'LL NEED BOTH SINCE THE FIRST LOADS THE STATUS FOR THE FIRST TIME AND THE SECCOND CREATES AN OBSERVABLE FOR WHEN THE STATUS CHANGE. 
} 

희망이 있습니다.