Question

我正在使用here提供的NHL API创建一个小型角度应用程序。

我的想法是显示每个团队的所有球员的名单，并能够单击球员的姓名并弹出一个对话框，其中包含他的详细信息，并可以选择进入具有扩展的详细信息和统计信息的另一页如果用户选择。

我正在使用角材垫对话框。

我的方法是单击一个播放器的名称，父组件将首先调用API以检索该播放器的数据，并在解决该问题后，将该数据传递给对话框组件。

cmake_minimum_required(VERSION 2.8.4)
project(Test_Project)

set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++11")

# includes cmake/FindSDL2.cmake
set(CMAKE_MODULE_PATH ${PROJECT_SOURCE_DIR}/cmake)

set(SOURCE_FILES src/main.cpp src/test.cpp)
add_executable(test ${SOURCE_FILES})

# The two lines below have been removed to run on my Windows machine
#INCLUDE(FindPkgConfig)
#PKG_SEARCH_MODULE(SDL2 REQUIRED sdl2)
find_package(SDL2 REQUIRED)

INCLUDE_DIRECTORIES(${SDL2_INCLUDE_DIR})
TARGET_LINK_LIBRARIES(chip8 ${SDL2_LIBRARY})

因此，将传递数据并运行弹出窗口，但是，在关闭对话框并选择新播放器后，这次，将使用新播放器的数据创建2个重复的弹出窗口（以及2个控制台日志）。对于第三个玩家，将创建3个弹出窗口，依此类推。

我有一种需要取消订阅的感觉（不确定在哪里，因为进行订阅的父组件从未被销毁，只有弹出组件被销毁了，但是没有可观察到的信息，因为API调用是通过父组件）。

还是我的对话框功能放置在错误的位置？

这是条目组件：

export class PlayersListComponent implements OnInit { 
team: string;
teamId: number; 
teamPlayers = [];
selectedPlayer;

constructor(private playersService: PlayersService,  private route: 
ActivatedRoute, private router: Router,  public dialog: MatDialog) { }

//additional code

getPlayerDetails(player){
 let playerId = +player.person.id
 this.playersService.getPlayerDetails(playerId)
 this.playersService.selectedPlayerUpdated.subscribe((data)=>{
   this.selectedPlayer = data;

   let dialogRef = this.dialog.open(PlayerPopupComponent, {
    data: this.selectedPlayer
   });
   dialogRef.afterClosed().subscribe((result=>{
     console.log('dialog was closed')
     }))
   })
}
}

任何帮助将不胜感激，谢谢。

Answer 1

您处在正确的轨道上，问题在于订阅，因此这是解决方案

this.playersService
    .selectedPlayerUpdated
    .pipe(take(1))
    .subscribe((data)=>{
        this.selectedPlayer = data;

        let dialogRef = this.dialog.open(PlayerPopupComponent, {
          data: this.selectedPlayer
        });
        dialogRef
        .afterClosed()
        .pipe(take(1))
        .subscribe((result=>{
          console.log('dialog was closed')
     }))
   })

通过使用take(1)（也可以使用fist()）运算符，您将从可观察的正好得到一个已订阅的结果后自动取消订阅。

角材料：mat-dialog打开多个对话框。取消订阅？

1 个答案: