Обновление переменной Angular2 с помощью Observable

ПРЕДУПРЕЖДЕНИЕ: Новичок в Angular2 У меня есть следующий код:

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
            <button (click)="ClickMe()">Button</button>`
})

export class AppComponent
{
  name:string;
  ClickMe(event : event) :void {
    var source = new Observable((observer: any) => {
      observer.next(42);
    });
    source.subscribe(function (x : any) {
    name = x;
    alert(x);
    });

  }
}

мое предупреждение всплывает, но представление не меняется, другими словами, я не получаю "Hello 42", я все еще вижу только "Hello"


person Pacman    schedule 29.12.2016    source источник


Ответы (2)


Это должно работать:

  ClickMe(event : Event) :void {
    var source = new Observable((observer: any) => {
      observer.next(42);
    });
    source.subscribe(x => {
    this.name = x;
    alert(x);
    });

  }
person AJT82    schedule 29.12.2016
comment
Хорошо, у меня работает, когда я тестировал, вид меняется :) - person AJT82; 29.12.2016
comment
Разветвил плункер, предоставленный 5313M выше, и, как видите, он работает :) Z8bZPzKm0zZ0q4Mcm1g7?p=preview Но я вижу, вы приняли мой ответ, так хорошо, что вы его поняли! :) - person AJT82; 29.12.2016
comment
хорошо, это работает, спасибо, быстрый вопрос, почему это работает: source.subscribe(x => {...} но не это: source.subscribe(function (x) {...} ? - person Pacman; 29.12.2016
comment
Кто-то умнее, вероятно, может ответить на это лучше. Я только знаю, что с function (x)... вы теряете возможность использовать this, а this.name — это то, что вы в этом случае хотите использовать для привязки его к вашему представлению. Надеюсь, кто-то другой объяснит лучше... - person AJT82; 29.12.2016

Вот плункер , он работает. должен указывать на имя объекта с помощью this.name, и нет необходимости в function при подписке.

person SeleM    schedule 29.12.2016
comment
Ваш пример не работает, после нажатия кнопки Hello не меняется на Hello 42, это та же проблема, о которой я спрашиваю. - person Pacman; 29.12.2016
comment
Ах, хорошо, было неясно, чего вы хотите.. думал, что это проблема с наблюдаемыми.. я обновлю ответ - person SeleM; 29.12.2016
comment
@Pacman plnkr обновлен с некоторыми исправлениями .. (немного отличается от AJT_82), и он работает :-) - person SeleM; 29.12.2016