Angular 进行HTTP调用以从嵌套组件获取值时，不会填充下拉列表

我有一个组件，它使用服务从API获取数据。此服务和组件的工作原理是，我可以成功地在表中的页面上显示此数据。我现在尝试在另一个组件中使用这个组件来填充下拉表单控件。不幸的是，此下拉列表未填充

调试时，这看起来像是一个异步问题，因为我可以看到控制台中显示的数据（使用

console.log（）

进行调试）。我还可以看到其他的

console.log（）

语句放在显示前后，但它们都在调用嵌套组件之前输出它们的值

调用组件

ngOnInit() {
    // Debugging code
    console.log('Before this.playerComponent.getPlayers()');

    // Nested component that gets the data from a service
    this.playerComponent.getPlayers();
    this.players = this.playerComponent.players;

    // Debugging code
    console.log('After this.playerComponent.getPlayers()');
}

getPlayers(): void {
    this.playerService.getPlayers().subscribe(
        players => {
            this.players = players;
        },
        error => this.errorMessage = <any>error
    );
}

<div class="form-group">
    <label for="player">Player</label>
    <select id="player" #season class="custom-select" formControlName="playerid">
        <option value="" disabled selected>Select Player (required)</option>
        <option *ngFor='let player of players' value="{{player.playerid}}">{{player.player}}</option>
    </select>
</div>

players = null;

constructor(private playerService: PlayerService) {}

ngOnInit() {
    this.playerService.getPlayers().subscribe(players => this.players = players);
}

@Input() players;

播放器组件（嵌套组件）

getPlayers（）：void{
此.playerService.getPlayers（）.subscribe(
玩家=>{
这个。玩家=玩家；
},
error=>this.errorMessage=

所以我的问题是，我是否需要更改此代码以等待HTTP请求返回数据？或者我是否需要更改代码以使其在返回数据时作出反应？
为什么以这种方式进行编码？您应该只在一个组件中拥有模型，并且如果您希望数据从子组件到子组件，子组件可以在其自己的ngOnInit方法中执行此操作在父级可用一旦我们的服务返回响应，使用eventemitter从子级通知父级玩家阵列的可用性，然后通过eventemitter的通知重新初始化父级组件的阵列。
在组件之间管理数据很困难。现在，使用Angular将Smar分离是一种很好的做法t分量来自表示分量

基本上，智能组件负责管理数据并将其传送到表示组件，其中表示组件只负责显示数据

这是关于这个问题的很好的解释




例如：

调用组件（将是我们的智能组件）

调用组件HTML

<app-players [players]="players"></app-players>

<div class="form-group">
<label for="player">Player</label>
<select id="player" #season class="custom-select" formControlName="playerid">
    <option value="" disabled selected>Select Player (required)</option>
    <option *ngFor='let player of players' value="{{player.playerid}}">{{player.player}}</option>
</select>
</div>

播放器组件HTML

<app-players [players]="players"></app-players>

<div class="form-group">
<label for="player">Player</label>
<select id="player" #season class="custom-select" formControlName="playerid">
    <option value="" disabled selected>Select Player (required)</option>
    <option *ngFor='let player of players' value="{{player.playerid}}">{{player.player}}</option>
</select>
</div>


玩家
选择播放机（必需）
{{player.player}

遵循这种做法（将数据从父组件传递到子组件）会使工作更轻松。
您可以获得可观察的
而不是访问实例变量。它始终确保异步调用完成后您就拥有数据

进行以下更改

PlayerComponent（嵌套组件）
如果您也希望嵌套组件中的播放器，可以使用相同的函数getPlayers（）并订阅它

注意：代码是直接在stackoverflow编辑器中编写的，因此可能存在一些打字错误或语法错误。请您自己更正

getPlayers
是异步的，因此
更改代码，使其在返回数据时作出反应
。如果在
ngOnInit
中，playerComponent
是子组件，我会改为
ngAfterViewInit
。是的，您必须“等待”对于数据，这不是调用
http
并假设它会出现的解决方案。@muradm使用
ngAfterViewInit
似乎没有改变results@Pengyy-这就是我想知道的。我想当
这个.players
被播放器数据填充时，它会相应地更新视图。so到目前为止，谷歌让我尝试使用承诺而不是可观察的，但我没有得到更好的结果。@johncode，是的，不会的，因为您正在调用
httpClient
，而不是“等待”响应，所以这不重要。但是，无论何时通过
@ViewChild（）使用子组件
，通常它可以在
ngAfterViewInit
上引用，而不是更早。请参见下面的答案，我将如何正常处理数据。我认为您让我走上了正确的道路。我将对此进行破解并返回结果。
ngOnInit() {
    // Debugging code
    console.log('Before this.playerComponent.getPlayers()');

    // Nested component that gets the data from a service
    this.playerComponent.getPlayers().subscribe(
    players =>  this.players = players);
}