Typescript error: Property 'value' does not exist on type 'Observable<any>'

Question

This is my code which throws error when compiling:

export class NoticeService {
  public notice: Observable<any>;
  private observer: any;

  constructor(private translate: TranslateService) {
    this.notice = new Observable(observer => {
      this.observer = observer;
    }).share();
  }

  create(value: string) {
    let translatedValue = this.translate.get(value).value;
    this.observer.next(translatedValue);
  }
}

Output of console.log(this.translate.get(value)) is:

ScalarObservable {_isScalar: true, value: "Some proper value!", etc.

Output of console.log(translatedValue) is:

"Some proper value!"

Error is:

ERROR in [default] /somePath/notice.service.ts:21:52
Property 'value' does not exist on type 'Observable<any>'.

Line 21 is:

let translatedValue = this.translate.get(value).value;

What could be wrong?

---

Update:

I am using ng2-translate and this is get method:

/**
 * Gets the translated value of a key (or an array of keys)
 * @param key
 * @param interpolateParams
 * @returns {any} the translated key, or an object of translated keys
 */
TranslateService.prototype.get = function (key, interpolateParams) {
    var _this = this;
    if (!key) {
        throw new Error('Parameter "key" required');
    }
    // check if we are loading a new translation to use
    if (this.pending) {
        return this.pending.map(function (res) {
            return _this.getParsedResult(_this.parser.flattenObject(res), key, interpolateParams);
        });
    }
    else {
        var translations = void 0;
        if (this.translations[this.currentLang]) {
            translations = this.parser.flattenObject(this.translations[this.currentLang]);
        }
        return Observable_1.Observable.of(this.getParsedResult(translations, key, interpolateParams));
    }
};

Solution 1

Since an observable is returned, you need to subscribe on it. Something like this:

create(value: string) {
  this.translate.get(value).subscribe(translatedValue => { 
    this.observer.next(translatedValue);
  });
}

and not to try to get value directly from it...

Solution 2

To any user who also searched for a more convenient method: In the meantime the developer of ng2-translate added the 'instant()' method to load the value directly (your TranslationLoader has to be loaded first for this to work): see https://github.com/ocombe/ng2-translate/issues/20 or, if the, TranslationLoader didn't happen to load before translate.instant(key) was used and only the keys are visible, another Issue dealt with that by waiting for the onLangChange event: https://github.com/ocombe/ng2-translate/issues/85

constructor (private translate : TranslateService){
     translate.onLangChange.subscribe((event: LangChangeEvent) => {
        ...
        let lesson  = new Lesson();

        lesson.title    =  translate.instant("lesson_1_title");

      });
}

Don't forget to load LangChange from ng2-translate in the header of the .ts Controller file:

import {TranslatePipe,TranslateService, LangChangeEvent} from 'ng2-translate/ng2-translate';