2016-04-07 28 views
0

Bu yüzden Angular2 uygulamamı Dizgi'den ES5'e dönüştürmeye çalışıyorum ve her ikisinin de benzer şekilde çalışmasını sağlamaya çalışıyorum. Yaşadığım sorun, ES5 sürümünde this.people güncellemesini almaktır. Benim searchFor yöntemde karşı yapıcı yılında this console.log'Bu', Angular2'deki Escript'in Bileşenindeki Bileşeni vs

, ben pencerenin kapsam karşı sınıfının kapsam belirleme olsun. Typescript sürümümde this konsol.log'u kullandığımda, SearchComponent içinde kalır ve her ikisinde de aynıdır.

typescript Versiyon:

import {Component} from 'angular2/core'; 
import {PersonService} from './person-service'; 

@Component({ 
    selector: 'search', 
    properties: ['searchTerm'], 
    templateUrl: `search.html`, 
}) 

export class SearchComponent { 
    searchTerm:string; 
    searchPrefix:string; 
    people:Person[]; 

    constructor(private _personService:PersonService) { 
    this.searchTerm = ''; 
    this.searchPrefix = ""; 
    this.people  = []; 
    this.predicate = 'last'; 
    } 

    searchFor(term) { 
    if (term.length < 2) 
     this.people = []; 
    else { 
     this._personService.getUsers(term) 
     .then((people)=> { 
      this.people = people; 
     }); 
    } 
    } 
} 

ES5 Versiyon

(function(app) { 
    app.SearchComponent = ng.core 
    .Component({ 
     selector: 'search', 
     properties: ['searchTerm'], 
     templateUrl: 'search.html', 
     providers: [app.PersonService] 
    }) 
    .Class({ 
     constructor: [app.PersonService, ng.router.Router, 
     function(_personService, _router) { 
      this.searchTerm = ''; 
      this.searchPrefix = ""; 
      this.people = []; 
      this._personService = _personService; 
      this._router = _router; 
     } 
     ], 
     searchFor(term){ 
     if (term.length < 2) 
      this.people = []; 
     else { 
      this._personService.getUsers(term) 
      .then(function(people) { 
       //Problem is with the 'this' below: 
       this.people = people; 
      }); 
     } 
     } 
    }); 
})(window.app || (window.app = {})); 

Ben bileşenleri ve hizmetlerin çalışma yapımında bazı başarı elde ettik ama biraz this stumped ha. Konuyla ilgili herhangi bir yardım veya düzeltme gerçekten takdir edilecektir!

cevap

3

değiştirme kodu olması için:

this._personService.getUsers(term) 
     .then(function(people) { 
      //Problem is with the 'this' below: 
      this.people = people; 
     }.bind(this)); 

(bu bağlamı yanlıştır ES6 size bu sorunu çözmek ok fonksiyonu var.)

, teşekkürler bir sürü işleri
+0

! Sanırım 'bu' kavramı ve kapsamı ile daha fazla inceleme yapmam gerekiyor. –

+1

TypeScript ok işlevlerinde, bu durumda, '.bind'den bir ok işlevinin kullanılması daha okunabilir olur. –