Angular 从角度阵列中的另一个组件访问阵列

我有一个数组，它是在一个名为“玩家选择”的组件中创建和填充的。在另一个名为“game”的组件中，我想访问数组并从中添加pull数据。数组由对象组成。每个对象代表一个“玩家”。每个玩家都有一个名字，存储为

playerName

属性。我想访问此属性，以便在

game.component.html

上显示它。我已经尽了最大的努力关注了网上的文章，但似乎还是有些地方出了问题。代码如下：

玩家选择.component.ts

@Component({
  selector: "app-player-selection",
  templateUrl: "./player-selection.component.html",
  styleUrls: ["./player-selection.component.css"]
})
export class PlayerSelectionComponent implements OnInit {
  players: PlayerObject[];
  constructor() {}

  ngOnInit() {
    this.players = [];
  }
  addNewPlayer() {
    var element = <HTMLInputElement>document.getElementById("nameInput");
    var nameInput = (<HTMLInputElement>document.getElementById("nameInput"))
      .value;
    var playerObject = new PlayerObject(nameInput);
    this.players.push(playerObject);
    element.value = "";
    console.log(this.players[0].playerName);
  }
}

@Component({
  selector: "app-game",
  templateUrl: "./game.component.html",
  styleUrls: ["./game.component.css"]
})
export class GameComponent implements OnInit {
  @Input() playerArr: PlayerObject[];
  constructor() {}

  ngOnInit() {

  }
}

game.component.html

    ...</div>
</div>
<app-game [playerArr]="players"></app-game>
<router-outlet></router-outlet>

<mat-tab label="1">
        <div *ngFor="let name of playerArr">
            <h3>{{ name.playerName }}</h3>
            <mat-form-field class="scoreInput">
              <input matInput placeholder="Score" id="player0" />
            </mat-form-field>
        </div>
</mat-tab>

{{name.playerName}

我能够通过数据服务实现这一点。我在

data.service.ts

export class DataService {
  private playerArray: PlayerObject[];
  // private playerIndex: number = 0;
  constructor() {
    this.playerArray = [];
  }

  addPlayer(player: PlayerObject) {
    this.playerArray.push(player);
    // this.playerIndex++
  }
  returnIndexName(index: number) {
    return this.playerArray[index].playerName;
  }
  playerCount() {
    return this.playerArray.length;
  }
  returnEachPlayerObject() {
    return this.playerArray;
  }
  addToScores(holesArray: number[], index: number) {
    for (var i = 0; i < holesArray.length; i++) {
      this.playerArray[index].scores.push(holesArray[i]);
    }
  }

  totalScores(index: number) {
    return this.playerArray[index].scores.reduce((x, y) => x + y);
  }
}

导出类数据服务{
私人玩家阵列：玩家对象[]；
//专用播放器索引：编号=0；
构造函数（）{
this.playerary=[]；
}
addPlayer（播放器：PlayerObject）{
这个。玩家阵列。推（玩家）；
//这是playerIndex++
}
returnIndexName（索引：编号）{
返回此.playerArray[index].playerName；
}
playerCount（）{
返回this.playerray.length；
}
returnEachPlayerObject（）{
返回此.playerray；
}
AddToScore（孔阵列：编号[]，索引：编号）{
对于（变量i=0；ix+y）；
}
}

您的问题到底是什么？您的console.log工作正常吗？