Не удается получить доступ к переменным компонента в подписке при использовании инспектора Chrome

Похоже на этот вопрос, но мне уже кажется иметь выбранный ответ. У меня есть следующее...

import {Component, OnDestroy} from '@angular/core';
import {MdIconRegistry} from "@angular2-material/icon/icon-registry";
import {MD_ICON_DIRECTIVES} from "@angular2-material/icon/icon";
import {ShowcaseCardComponent} from "./showcase-card/showcase-card.component";
import { WheelService } from "../../wheel/wheel.service";
@Component({
    selector: 'jg-showcase',
    template: String(require('./showcase.component.pug')),
    styles: [String(require('./showcase.component.styl'))],
    directives: [MD_ICON_DIRECTIVES, ShowcaseCardComponent],
    viewProviders: [MdIconRegistry]
})
export class ShowcaseComponent implements OnDestroy{
    currentCard: number = 0;
    subscription: any;
    cards = [
        {
            number: 0,
            color: "blue",
            content: "<h1>Card1</h1>"
        },
        {
            number: 1,
            content: "<h1>Card2</h1>"
        }
    ];
    constructor(wheelService: WheelService){
        this.subscription = wheelService.wheelEmitter.subscribe((data: any) => {
           if(data.direction > 0 && this.currentCard !== this.cards.length){
               this.currentCard++;
           }
           else if(this.currentCard){
               this.currentCard--;
           }
           console.log("Current Card "+this.currentCard);
        })
    };
    ngOnDestroy() {
        this.subscription.dispose();
    };
}

проблема в том, что this не определено в инспекторе, но я вижу правильный console.log...

Current Card 1
Current Card 2

Почему консоль говорит, что это не определено

this.currentCard
VM10154:1 Uncaught TypeError: Cannot read property 'currentCard' of undefined(…)

angular angular2-components
person Jackie    schedule 01.07.2016    source источник
comment
Проблема, которую вы наблюдаете, только в хромовом инспекторе? Если это правда, то это связано с тем, как стрелочная функция TS и function.bind работает в JS. Инспектор не может исправить это   -  person Arpit Agarwal    schedule 01.07.2016
comment
Последняя цитата показывает, что инспектор не видит переменную, хотя код работает.   -  person Jackie    schedule 03.07.2016

Ответы (1)


arrow_upward
1
arrow_downward

Это связано с тем, как работает стрелочная функция. реализовать в ТС. this в функции стрелки выводится лексически, поэтому она больше соответствует приведенному ниже коду.

function Person() {
  var self = this; // Some choose `that` instead of `self`. 
                   // Choose one and be consistent.
  self.age = 0;

  setInterval(function growUp() {
    // The callback refers to the `self` variable of which
    // the value is the expected object.
    self.age++;
  }, 1000);
}

Таким образом, внутри функции стрелки на самом деле это не this, а контекст ближе self. Это может быть не фактическая реализация, но гораздо ближе к тому, чтобы дать вам понимание того, что происходит.

Теперь в Инспекторе, когда вы вводите это, он находится за пределами функции close/стрелки, поэтому не получит правильного контекста для этого, поэтому Инспектор покажет вам либо undefined, либо window, либо какой-то global object

Это должно объяснить, почему ваш код работает, но Инспектор не дает ожидаемого результата.

Совет посмотрите, как транспилируется JS, как трансформируется ваша стрелочная функция.

person Arpit Agarwal    schedule 03.07.2016
comment
Таким образом, вы, по сути, говорите, что функция стрелки работает в другом контексте, чем инспектор? Я правильно это понимаю? - person Jackie; 04.07.2016
comment
в яблочко. Функция стрелки имеет правильный контекст, а инспектор — нет. - person Arpit Agarwal; 04.07.2016