Angular 2 как вернуть данные из подписки

Это то, что я хочу.

@Component({
   selector: "data",
   template: "<h1>{{ getData() }}</h1>"
})

export class DataComponent{
    this.http.get(path).subscribe({
       res => return res;
    })
}

Если getData вызывается внутри DataComponent, вы можете предложить назначить его переменной типа this.data = res и использовать я like {{data}}. Но мне нужно было использовать как {{getData}} для моих собственных целей. Пожалуйста, предложите мне?

Ответ 1

Вы просто не можете вернуть значение напрямую, потому что это асинхронный вызов. Асинхронный вызов означает, что он работает в фоновом режиме (фактически запланирован для последующего выполнения), пока ваш код продолжает выполняться.

Вы также не можете иметь такой код в классе напрямую. Его нужно перенести в метод или конструктор.

Что вы можете сделать, это не только subscribe(), но и использовать оператор типа map()

export class DataComponent{
    someMethod() {
      return this.http.get(path).map({
        res => return res;
      });
    }
}

Кроме того, вы можете комбинировать несколько .map с теми же Observables, что иногда это улучшает ясность кода и сохраняет вещи в отдельности. Пример:

validateResponse = (response) => validate(response);

parseJson = (json) => JSON.parse(json);

fetchUnits() {
    return this.http.get(requestUrl).map(this.validateResponse).map(this.parseJson);
}

Таким образом, наблюдаемый будет возвратом, вызывающий может подписаться на

export class DataComponent{
    someMethod() {
      return this.http.get(path).map({
        res => return res;
      });
    }

    otherMethod() {
      this.someMethod().subscribe(data => this.data = data);
    }
}

Вызывающий может также находиться в другом классе. Здесь он просто для краткости.

data => this.data = data

res => return res

- функции стрелок. Они похожи на обычные функции. Эти функции передаются на subscribe(...) или map(...) для вызова из наблюдаемого, когда данные поступают из ответа. Вот почему данные не могут быть возвращены напрямую, потому что когда someMethod() завершено, данные еще не были получены.

Ответ 2

Два способа, о которых я знаю:

export class SomeComponent implements OnInit
{
    public localVar:any;

    ngOnInit(){
        this.http.get(Path).map(res => res.json()).subscribe(res => this.localVar = res);
    }
}

Это приведет к назначению вашего результата в локальную переменную, как только информация будет возвращена точно так же, как в обещании. Тогда вы просто сделаете {{ localVar }}

Другой способ - получить наблюдаемый как localVariable.

export class SomeComponent
{
    public localVar:any;

    constructor()
    {
        this.localVar = this.http.get(path).map(res => res.json());
    }
}

Таким образом вы подвергаете наблюдаемому, в какой момент вы можете сделать в своем html, использовать AsyncPipe {{ localVar | async }}

Пожалуйста, попробуйте и дайте мне знать, если это сработает. Кроме того, поскольку angular 2 довольно новый, не стесняйтесь комментировать, если что-то не так.

Надеюсь, что это поможет

Ответ 3

Я использовал этот способ много времени...

@Component({
   selector: "data",
   template: "<h1>{{ getData() }}</h1>"
})

export class DataComponent{
    this.http.get(path).subscribe({
       DataComponent.setSubscribeData(res);
    })
}


static subscribeData:any;
static setSubscribeData(data):any{
    DataComponent.subscribeData=data;
    return data;
}