получить значение ответа от angular наблюдаемого после метода POST - PullRequest
Новая
       5

получить значение ответа от angular наблюдаемого после метода POST

0 голосов
/ 23 апреля 2020

Я создаю Recipe объект и сохраняю его в моем Django бэкэнде, используя CreateAPIView. После этого Recipe я хочу использовать его значение id, чтобы создать URL-адрес для перенаправления на другую страницу, где я могу загрузить дополнительную информацию о Recipe, который был только что создан. Я хочу поместить значение id в URL, потому что его легко получить в URL, все, что я знаю, как это сделать.

AddRecipeComponent 

  submitrecipe(){
    this.recipeservice.addrecipe(this.newrecipe).pipe(
      map(res => this.response = res)
    )
    console.log(this.response) //THIS ALWAYS SHOW UNDEFINED IN THE CONSOLE
    this.router.navigate(['/recipeimage/'+this.response.id])
  }
}

recipe.service 

  addrecipe(newrecipe):Observable<any>{
    return this.http.post(this.addrecipeUrl, newrecipe)
  }

views.py 

class AddRecipe(generics.CreateAPIView):
    serializer_class = RecipeFullSerializer

serializer.py 

class RecipeFullSerializer(serializers.ModelSerializer):
    class Meta:
        model = Recipe
        fields = ['name', 'id']

Проблема в том, что я не могу получить параметр id из ответа в RecipeComponent, на самом деле я никогда не вижу значение для ответа всегда неопределено. Я знаю, что наблюдаемое - это asyn c, поэтому, вероятно, поэтому я всегда вижу его как неопределенное.

Я думаю, мне нужно дождаться завершения асинхронной операции? Или, может быть, есть лучший способ?

1 Ответ

0 голосов
/ 23 апреля 2020
  1. HTTP POST-вызов является асинхронным методом.
  2. subscribe() лучше, чем map() здесь. map обычно используется для преобразования / отображения ответа из одной формы в другую.
  3. Все параметры ответа c logi c должны быть в рамках подписки.
  4. Также всегда рекомендуется обрабатывать ошибку при подписке на вызовы HTTP.

Попробуйте следующее 

submitrecipe() {
  this.recipeservice.addrecipe(this.newrecipe).subscribe(
    res => {
      this.response = res;
      console.log(this.response);
      this.router.navigate(['/recipeimage/'+this.response.id]);
    },
    error => {
      // handle error
    }
  );
}
...