[仅当用户输入数字时如何动态显示项目（图标）？ Rails 5.2

Question

我正在构建一个房地产应用程序，用户可以在其中添加浴室，车库，厨房等便利设施。

事实是，我希望用户输入一个数字，例如1个浴室和1个厨房，而如果他将其他便利设施留在空白处，它将只显示他填写的那个。我正在使用嵌套属性：

property.rb模型

class Property < ApplicationRecord
    belongs_to :owner
    has_many :amenities
    accepts_nested_attributes_for :amenities
end

amenity.rb模型

class Amenity < ApplicationRecord
    belongs_to :property
end

show.html.erb

 <div class="section">    
    <div class="row">
        <div class="container">
            <div class="col l6">
                <h5>Description</h5>
                <p class="text-justify"><%= @property.description %></p>
            </div>

            <div class="col l6">
                <h5>Amenities</h5>

               <!--Nested icons-->
                <% @property.amenities.each do |amenity|%>
                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">gym</p>
                            <p class="no-margin-top-bottom"><%= amenity.gym %></p>
                        </div>
                    </div>

                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">kitchen</p>
                            <p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
                        </div>
                    </div>
                <% end %>   
            </div>
        </div>
    </div>

Property Web form

<%= form_with(model: property, local: true) do |form| %>
    <% if property.errors.any? %>
        <div id="error_explanation">
            <h2><%= pluralize(property.errors.count, "error") %> prohibited this property from being saved:</h2>

            <ul>
                <% property.errors.full_messages.each do |message| %>
                    <li><%= message %></li>
                <% end %>
            </ul>
        </div>
    <% end %>

    <div class="section">
        <div class="row">
            <div class="container">
                <div class="col l9">
                    <div class="col l5">
                        <div class="input-field">
                            <i class="material-icons-two-tone prefix">edit</i>
                            <label for="icon_prefix"><%= form.label :name %></label><br />
                            <%= form.text_field :name, class:"form-control" %>
                        </div>
                    </div>

                    <div class="col l6">
                        <div class="input-field">
                            <i class="material-icons-two-tone prefix">edit</i>
                            <label for="icon_prefix"><%= form.label :description %></label><br />
                            <%= form.text_area :description, class:"form-control materialize-textarea" %>
                        </div>
                    </div>

                    <div class="col l2">
                        <div class="input-field">
                            <i class="material-icons-two-tone"></i>
                            <label for="icon_prefix"><%= form.label :price %></label>
                            <%= form.number_field :price, class:"form-control" %>
                        </div>
                    </div>
                </div>

                <div class="col l12">
                    <div class="section">
                        <h5>Amenidades</h5>
                        <%= form.fields_for :amenities do |amenities_form| %>
                            <div class="col l2">
                                <div class="input-field">
                                    <i class="material-icons-two-tone prefix">fitness_center</i>
                                    <label for="icon_prefix"><%= amenities_form.label :gym %></label><br>
                                    <%= amenities_form.number_field :gym %>
                                </div>
                            </div>

                            <div class="col l2">
                                <div class="input-field">
                                    <i class="material-icons-two-tone prefix">kitchen</i>
                                    <label for="icon_prefix"><%= amenities_form.label :kitchen %></label><br>
                                    <%= amenities_form.number_field :kitchen %>
                                </div>
                            </div>

                           <div class="col l2">
                                <div class="input-field">
                                    <i class="material-icons-two-tone prefix">garage</i>
                                    <label for="icon_prefix"><%= amenities_form.label :garage %></label><br>
                                    <%= amenities_form.number_field :garage %>
                                </div>
                            </div>
                        <% end %>
                    </div>
                </div>
            </div>  
        </div>
    </div>

    <div class="section">
        <div class="actions center-align">
            <%= form.submit class:"waves-effect waves-light btn" %>
        </div>
    </div>
<% end %>

如您所见，我必须复制图标，但问题是，如果用户留空，则数字将不会显示，但图标会显示，所以我只想显示icon和设施编号动态。

非常感谢您的帮助！！ ：D

Answer 1

在您的show.html.erb中，您可以添加条件-我为amenity.gym添加的条件>

 <div class="section">    
    <div class="row">
        <div class="container">
            <div class="col l6">
                <h5>Description</h5>
                <p class="text-justify"><%= @property.description %></p>
            </div>

            <div class="col l6">
                <h5>Amenities</h5>

               <!--Nested icons-->
                <% @property.amenities.each do |amenity|%>
                  <% if amenity.gym.present? %> ----> From Here
                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">gym</p>
                            <p class="no-margin-top-bottom"><%= amenity.gym %></p>
                        </div>
                    </div>
                  <% end %> -- Till Here
                    <div class="col l2">
                        <div class="center-align">
                            <i class="material-icons-two-tone px32 no-margin-top-bottom">fitness_center</i>
                            <p class="no-margin-top-bottom">kitchen</p>
                            <p class="no-margin-top-bottom"><%= amenity.kitchen %></p>
                        </div>
                    </div>
                <% end %>   
            </div>
        </div>
    </div>