title: Cannot set property of null in angular-2 when using this?
body: <p>Hi I'm getting an error in </p>
  
  <blockquote>
    <p>angular2-polyfills.js:143 Uncaught TypeError: Cannot set property 'singlehotel' of null(…) </p>
  </blockquote>
  
  <p>and a warning from Firebase </p>
  
  <blockquote>
    <p>FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot set property 'singlehotel' of null</p>
  </blockquote>
  
  <p>When I tried to get the data from Firebase I am getting this error, any one please help to to resolve this.</p>
  
  <p>Thanks in advance!</p>
  
  <h2>here is my code</h2>
  
  <pre><code>ngAfterContentInit() {
  
         this.singlehotel = {};
         firebase.database().ref('Rests/').once('value', function(snapshot) {
           console.log('value from db' + JSON.stringify(snapshot.val()));
           var getrest = snapshot.val();
           console.log(JSON.stringify(getrest));
  
             for (var key in getrest) {
  
                    if(restemail == getrest[key].email){
  
            console.log(key + ':' + JSON.stringify(getrest[key]));
                            this.singlehotel = getrest[key]; //getting error here when using this
  
           }         
              }
           });                
        };
  </code></pre>
  
  <h2>index.html</h2>
  
  <pre><code>&lt;script src="https://www.gstatic.com/firebasejs/3.5.1/firebase.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        // Initialize Firebase
        // for security reasons i am hiding my keys 
        var config = {
          apiKey: "***",
          authDomain: "***",
          databaseURL: "***",
          storageBucket: "**",
          messagingSenderId: "**"
        };
        firebase.initializeApp(config);
      &lt;/script&gt;
         &lt;body&gt;
        &lt;my-app&gt;Loading...&lt;/my-app&gt;
      &lt;/body&gt;
  </code></pre>
  
  <h2>view</h2>
  
  <pre><code>&lt;div class="container" style="background-color: #f2f2f2;"&gt;
      &lt;h1&gt;&lt;b&gt;Hotel Name :{{singlehotel.displayName}}&lt;/b&gt;&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>both belongs to same componet.when the view gets loaded the ngAfterContentInit() function willi be called every time , thats how the function triggers but i am not able to store in scope i mean this.please help me</p>