Question

我制作了一个简单的CRUD应用进行锻炼，但是我对自动更新表有疑问。

我从API调用数据，还将新数据发布到API。在应用内，我使用ng-bootstrap显示表格列表，并添加新项目，我使用了引导程序模式框。

在我的var headers = [ {"retry":5}] producer.produce(topic, partition, message, key, timestamp,opaque,headers);中，这是我获取所有用户并添加新用户的代码


library(shiny)

ui <- fluidPage(

  # App title ----
  titlePanel("Test app"),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

      # Input: Slider for the number of bins ----
      sliderInput(inputId = "bins",
                  label = "Number of bins:",
                  min = 1,
                  max = 50,
                  value = 30),
      tags$audio(src = "brand.mp3", type = "audio/mp3", autoplay = NA, controls = NA)

    ),

    mainPanel(
      plotOutput(outputId = "distPlot")

    )
  )
)



server <- function(input, output) {


  output$distPlot <- renderPlot({

    x    <- faithful$waiting
    bins <- seq(min(x), max(x), length.out = input$bins + 1)

    hist(x, breaks = bins, col = "#75AADB", border = "white",
         xlab = "Waiting time to next eruption (in mins)",
         main = "Histogram of waiting times")

  })

}

shinyApp(ui = ui, server = server)

这是service

中的代码

getUsers(): Observable<UserModel[]> {
return this.httpClient.get<UserModel[]>(environment.BASE_URL + this.apiurlAllUsers).pipe(
  tap(data => console.log(data)),
  catchError(this.handleError)
);
}


updateUser(formData) {
this.httpClient.post(environment.BASE_URL + "user/add/", formData)
.subscribe(response => this.getUsers(), error => console.log(error));
}

刷新页面后，新数据位于表中，但是如何在不刷新的情况下获取它？请问有人可以解释我做错了什么吗？ thnx

Answer 1

不订阅该服务。从您的updateUser()方法（应将其命名为createUser()或addUser()，顺便说一句）中返回一个可观察值。一旦知道创建成功，然后在组件中使用switchMap()再次列出用户：

from(modalRef.result).pipe(
  switchMap(() => this.userService.createUser(result)),
  switchMap(() => this.userService.getUsers())
).subscribe(users => this.allUsers = users);

此外，请勿使用any。定义一个User接口来描述用户的结构并使用它。并且不要存储collectionSize，因为您可以简单地从allUsers.length获得它：这是多余的。

Answer 2

更新您的服务方法以返回可观察的结果

updateUser(formData) {
 return this.httpClient.post(environment.BASE_URL + "user/add/", formData);
}

然后在用户组件中

modalRef.result
  .then(result => {
    this.userService.updateUser(result).subscribe((data)=>{
    this.getUsersInList()
    });
  })
  .catch(error => {});
}

还要从您的getUsersInList bcs中删除this.allUsers = [];，它将清空列表，并且ui将显示空白页，直到加载数据为止。

Answer 3

使用async管道将请求结果发送到UI。

<div *ngFor="let user of getUsers() | async"> ...

添加新项目后，可观察表未更新

3 个答案: