问题描述
我正在制作一个 Shiny
应用,其中 tabPanels
嵌入在 navbarPage
中。
在每个 tabPanel
中,我生成一系列图像。从一个面板切换到另一个面板时,其中之一加载的图像消失。
我必须手动“刷新”页面才能再次看到它。问题似乎与发布的 here 类似,但我无法真正子集我的 tabPanels
,即使我给了 $id
和 value
。
这是一个可重现的例子:
library(shiny)
library(shinythemes)
library(slickr)
## ui ----
# Image list
imgs <- list(
stackoverflow =
"https://upload.wikimedia.org/wikipedia/fr/9/95/Stack_Overflow_website_logo.png",stackexchange =
"https://upload.wikimedia.org/wikipedia/commons/6/6f/Stack_Exchange_logo.png"
)
ui <- navbarPage(title = div(
HTML('<span style="font-size:180%;color:white;font-weight:bold;"> Navbarpage</span></a>'),tags$style(style = 'position:absolute; right:42px;'),tags$style(HTML("#panel1{font-size: 25px}")),tags$style(HTML("#panel2{font-size: 25px}")),tags$style(HTML("#panel_about{font-size: 25px}"))
),theme = shinytheme("flatly"),windowTitle = "Navbarpage",id = "navbar",## First tabpanel ----
tabPanel(h1(id = "panel1","Panel 1"),value = 1,fluid = TRUE,fluidRow(column(4,selectInput("img_list","Image list",choices = imgs,selected = imgs[1])),column(8,slickrOutput("plot_panel1"))),),tabPanel(h1(id = "panel2","Panel 2"),value = 2,slickrOutput("plot_panel2"))),)
) # closes navbarpage
## server ----
server <- function(input,output,session){
observe({
output$plot_panel1 <- renderslickr({
slick1 <- slick_list(slick_div(
input$img_list,css = htmltools::css(width = "100%",margin.left = "auto",margin.right = "auto"),type = "img",links = NULL))
slickr(slick1)
})
})
observe({
output$plot_panel2 <- renderslickr({
slick2 <- slick_list(slick_div(
input$img_list,links = NULL))
slickr(slick2)
})
})
}
shinyApp(ui,server)
解决方法
当有多个 slickR
对象要渲染时,您需要为每个对象使用唯一的 slideId
。此外,您不应将 render*
函数包装在 observe
中并为两个 id
使用相同的 selectInput
。
请检查以下内容:
library(shiny)
library(shinythemes)
library(slickR)
## ui ----
# Image list
imgs <- list(
stackoverflow =
"https://upload.wikimedia.org/wikipedia/fr/9/95/Stack_Overflow_website_logo.png",stackexchange =
"https://upload.wikimedia.org/wikipedia/commons/6/6f/Stack_Exchange_Logo.png"
)
ui <- navbarPage(title = div(
HTML('<span style="font-size:180%;color:white;font-weight:bold;"> Navbarpage</span></a>'),tags$style(style = 'position:absolute; right:42px;'),tags$style(HTML("#panel1{font-size: 25px}")),tags$style(HTML("#panel2{font-size: 25px}")),tags$style(HTML("#panel_about{font-size: 25px}"))
),theme = shinytheme("flatly"),windowTitle = "Navbarpage",id = "navbar",## First tabpanel ----
tabPanel(h1(id = "panel1","Panel 1"),value = 1,fluid = TRUE,fluidRow(column(4,selectInput("img_list1","Image list",choices = imgs,selected = imgs[1])),column(8,slickROutput("plot_panel1"))),),tabPanel(h1(id = "panel2","Panel 2"),value = 2,selectInput("img_list2",slickROutput("plot_panel2"))),)
) # closes navbarpage
## server ----
server <- function(input,output,session){
output$plot_panel1 <- renderSlickR({
slick1 <- slick_list(slick_div(
input$img_list1,css = htmltools::css(width = "100%",margin.left = "auto",margin.right = "auto"),type = "img",links = NULL))
slickR(slick1,slideId = "slide1")
})
output$plot_panel2 <- renderSlickR({
slick2 <- slick_list(slick_div(
input$img_list2,links = NULL))
slickR(slick2,slideId = "slide2")
})
}
shinyApp(ui,server)