如何将按钮的文本设置为我创建的对象的字段？

Question

我创建了一个名为 Category 的类，其成员是一个列表，类型为 Dish（我创建的另一个类）。我正在尝试创建一个按钮的网格容器，这些按钮为列表中的每个菜肴显示一个按钮，并且按钮的文本将与菜肴名称匹配。我正在使用for循环来创建按钮，但是当我尝试将按钮文本添加为菜肴名称“”时，没有任何显示。我认为我不太擅长创建一个列表和一个对象，以及如何在javascript中调用一个对象的字段。请让我知道我做错了什么，或者是否有更好的方法可以解决这个问题，任何建议将不胜感激。断续器btn.innerText = categor.dishes[i].name;

这是类菜

public class Dish

    {

        public string name;

        public int price;

        public Dish(string foodName, int foodPrice)

        {

            name = foodName;

            price = foodPrice;

        }

        public string Name { get; set; }

        public int Price { get; set; }

    }

这是类类别

  public class category

        {

            public string name;

            public IList<Dish> dishes;

            public category(string Name, IList<Dish> Dishes)

            {

                name = Name;

                IList<Dish> dishes = Dishes;

        }

        public string Name { get; set; }

        public IList<Dish> Dishes { get; set; }

    }

这是视图中的代码

  <style>

        .categories-buttons {

            display: grid;

            grid-template-columns: 80px 80px 80px 80px 80px;

        }

        .item {

            padding: 10px;

        }

    </style>

    <!--  <div class="categories-buttonsDisplay">

    <input type="text" class="calculator-screen" value="0" disabled />-->

    <div class="categories-buttons">

    </div>

    <script>

        var dish1 = { name: sweetpatato, price: 64 };

        var dish2 = { name: mushroom, price: 89 };

        var dish3 = { name: halomi, price: 76 };

        var list = { dish1, dish2, dish3 };

        var categor = { name: salads, dishes: list };

        var div = document.getElementsByClassName("categories-buttons")[0];

        for (var i = 0; i < list.length; i++) {

            var btn = document.createElement("button");

            btn.innerText = categor.dishes[i].name;

            div.append(btn);

        }

    </script>

Answer 1

首先，list.length将为您提供未定义的，因为list是像对象一样创建的，而不是像数组一样，所以你应该用这些'['， ']'替换大括号其次，设置名称时会出现错误。为了设置一个字符串，你应该像这样设置它们：名称：'sweetpatato'下面是一个代码的工作示例：<style>.categories-buttons {&nbsp; &nbsp; display: grid;&nbsp; &nbsp; grid-template-columns: 80px 80px 80px 80px 80px;}.item {&nbsp; &nbsp; padding: 10px;}</style><div class="categories-buttons"></div><script>var dish1 = { name: 'sweetpatato', price: 64 };var dish2 = { name: 'mushroom', price: 89 };var dish3 = { name: 'halomi', price: 76 };var list = [dish1, dish2, dish3];var categor = { name: 'salads', dishes: list };var div = document.getElementsByClassName("categories-buttons")[0];for (var i = 0; i < list.length; i++) {&nbsp; &nbsp; var btn = document.createElement("button");&nbsp; &nbsp; btn.innerText = categor.dishes[i].name;&nbsp; &nbsp; div.append(btn);}</script>