从 Angular 中的另一个组件访问数组

Question

我有一个数组，它是在名为 "player-selection" 的组件中创建和填充的。在另一个名为 "game" 的组件中，我想访问数组并从中添加拉取数据。数组由对象组成。每个对象代表一个"player"。每个玩家都有一个名字，存储为 playerName 属性。我想访问这个属性以便我可以在 game.component.html 上显示它。我已尽我所能关注在线文章，但似乎仍然有问题。这是代码：

玩家-selection.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);
  }
}

玩家-selection.component.html

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

game.component.ts

@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

<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>

Answer 1

我能够使用数据服务实现此目的。我在 data.service.ts

中创建了以下 class

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);
  }
}

从 Angular 中的另一个组件访问数组

Accessing array from another component in Angular

angular-components

angular