如何使用Django的序列化数据在Angular中访问ForeignKey模型属性

Question

我正在使用Angular 8和Django3。我想为Restaurant创建一个页面，该页面显示Recipes拥有的所有Restaurant。我有一个Restaurant模型和一个具有Recipe关系的ForeignKey模型，如下所示：

编辑：models.py

class Restaurant(models.Model):
    name = models.CharField(max_length=100)


class Recipe(models.Model):
    name = models.CharField(max_length=30)

    restaurant = models.ForeignKey(Restaurant, related_name='recipe', on_delete=models.CASCADE)

    def __str__(self):
        return self.name

我正在使用Restaurant序列化PrimaryKeyRelatedField的数据：

serializers.py

class RestaurantDetail(serializers.ModelSerializer):
    recipe = serializers.PrimaryKeyRelatedField(many=True, read_only=True)

    class Meta:
        model = Restaurant
        fields = ('id', 'name', 'food', 'recipe')

[当我在Postman中输入url（http://127.0.0.1:8000/restaurants/restaurantdetail/2）时，我得到了正确的响应数据，因为它为我提供了Restaurant的名称以及与之相关的Recipe pk值的数组Restaurant。因此，我正确地进行了序列化。

{
    "id": 2,
    "name": "sec",
    "recipe": [
        3,
        4
    ]
}

但是，我想做的是，在我的Angular html文件中，可以访问数组中每个Recipe的名称。当我遍历数组时，我只能访问的是pk值。有没有一种简单的方法可以执行此操作，或者我需要创建另一个Angular组件，该组件会查找并为每个Recipe值返回一个新的pk对象。

换句话说，我猜串行器不是返回Recipe对象，而只是返回其pk值？

Answer 1

向模型添加str函数

class Restaurant(models.Model):
    name = models.CharField(max_length=100)

    def __str__(self):
        return self.name

class Recipe(models.Model):
    name = models.CharField(max_length=30)
    restaurant = models.ForeignKey(Restaurant, related_name='recipe', on_delete=models.CASCADE)

    def __str__(self):
        return self.restaurant.name

Answer 2

我通过使用嵌套序列化解决了这个问题。这是指向文档Nested Serialization

的良好链接

serializers.py

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


class RestaurantDetail(serializers.ModelSerializer):
    recipe = RecipeShort(many=True, read_only=True)

    class Meta:
        model = Restaurant
        fields = ('id', 'name', 'food', 'recipe')