Question

目前，我的数据显示如下（并且工作正常）

<div class="container-fluid">
   <% @entries.reverse.each do |entry| %>
     <div class="card">
       <div class="card-block">
        <p class="card-title"><b><%= entry.title %></b></p>
        <p class="card-text"><%= entry.link %></p>
       </div>
     </div>
   <% end %>
</div>

尝试更改布局以显示三张牌系列中的数据，例如：https://v4-alpha.getbootstrap.com/components/card/#card-decks

这就是我重写它的方式：

<div class="card-deck">
  <% @entries.each_slice(3) do |entry| %>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title"><%= entry.title %></h4>
      <p class="card-text"><%= entry.link %></p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
    <% end %>
  </div>

  <% @entries.each_slice(3) do |entry| %>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title"><%= entry.title %></h4>
      <p class="card-text"><%= entry.link %></p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
    <% end %>
  </div>

  <% @entries.each_slice(3) do |entry| %>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-block">
      <h4 class="card-title"><%= entry.title %></h4>
      <p class="card-text"><%= entry.link %></p>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
    <% end %>
  </div>
</div>

这是我尝试立即显示页面时收到的错误：

NoMethodError in Entries#index


undefined method `title' for #<Array:0x007fa6dab11a10>

为什么我收到此错误？

感谢您的帮助。如果此问题需要进一步澄清和/或了解更多信息，请与我们联系。

更多信息：

require 'open-uri'

module RedditScrapper
  def self.scrape
    doc = Nokogiri::HTML(open("https://www.reddit.com/"))

    entries = doc.css('.entry')
    entries.each do |entry|
      title = entry.css('p.title > a').text
      link = entry.css('p.title > a')[0]['href']
      category = entry.css('p.tagline > a')[0]['href']
      Entry.create!(title: title, link: link, category: category )
    end
  end
end

Answer 1

each_slice返回一个数组，尝试访问数组上的title或link将返回此错误。要访问数据，您必须在切片数组中按索引获取。

Answer 2

<div class="card-columns">
   <% @entries.reverse.each do |entry| %>
     <div class="card">
       <div class="card-block">
        <p class="card-title"><b><%= entry.title %></b></p>
        <p class="card-text"><%= entry.link %></p>
       </div>
     </div>
   <% end %>
</div>

SCSS：

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 3;
  }
  @include media-breakpoint-only(xl) {
    column-count: 3;
  }
}

使用Bootstrap Cards（Decks）显示信息时出现问题

2 个答案: